Cyberpunk Example Deconstruction

A few of us have been asking "how have you done the Cyberpunk example?" so this article aims to deconstruct how it was done.

The Cyberpunk Example on our web page consists of two scenes, each with a set of images, 225 and 292 images, fixed content and a few animations.

Source Media

1) CYBERPUNK ROBOT

https://elements.envato.com/digital-hacker-with-hoodie-and-futuristic-mask-4k-VGL6AX3

2) DNA

https://www.pexels.com/video/video-presentation-of-uncovering-a-deoxyribonucleic-acid-pattern-3191574/

Here the hue of the video was changed to match our brand.

https://www.pexels.com/video/a-video-illustration-of-a-human-deoxyribonucleic-acid-3191420/

Some of the CSS and settings are theme specific. We use TwentyTwenty theme, so if you want to re create exactly, you are welcome to use this theme. Below are the various settings and HTML used in the example.

When copy-pasting the Fixed content HTML click on the "text" tab so you are not pasting it to the "Visual" tab in TinyMCE editor.

Scene 0

Fixed Content Editor

<h2 class="hacker1 ssq-center-center">Cinematic Scroll Animation</h2>
<div class="hacker2 ssq-center-center">
<h2>Never Seen Before on WordPress</h2>
Available for free from WordPress <a href="https://wordpress.org/plugins/scrollsequence/">repository</a> or directly from this website.

</div>
<div class="hacker3 ssq-center-center">
<h2>Make your website come alive</h2>
Compatible with all WordPress themes. Animation can be inserted into any webpage with simple shortcode.

</div>

Animation Settings

Scene 1

Fixed Content Editor

<div id="dna1" class="ssq-white ssq-center-center">
<h1>Embrace Technology</h1>
Be one of the early early adopters.

</div>
<div id="dna2" class="ssq-white ssq-center-center">
<h1>Progress is in our DNA</h1>
Never create a boring website ever again.

</div>
<div id="dna3" class="ssq-white ssq-center-center">
<h1>Try our <a href="http://scrollsequence.com/live-demo/wp-admin">LIVE DEMO</a> Now</h1>
</div>

Animation Settings

Other Settings

CSS

Here a bunch of stuff is to compensate for the fact that TwentyTwenty theme is light (white background, dark text) but the Cyberpunk page is dark, so I had to revert colors a lot from black to white and vice-versa.

.ssq-center-center{
    position: absolute;
    top: 30%;
    left: 2%;
    right: 2%;
    bottom: 0;
    margin: auto;

text-align: center;
 text-shadow: 0 0 8px 
  rgb(94,81,255);
color:white;
}


.ssq-white {
    text-shadow: 0 0 8px 
    rgb(94,81,255);
    color:white;
}



.site-title .faux-heading {
color:white
}

body {
background-color:black!important;
}

#site-header, .footer-nav-widgets-wrapper, #site-footer, .menu-modal, .menu-modal-inner, .search-modal-inner, .archive-header, .singular .entry-header, .singular .featured-media:before, .wp-block-pullquote:before {
background-color:black;
}

ul.primary-menu.reset-list-style > li > a {
    color: white!important;
}
.header-footer-group, body:not(.overlay-header) #site-header .toggle, .menu-modal .toggle{
color: white;
}

#site-header {
background-color: transparent;
}




/* unvisited link */
a:link {
  color: white;
}

/* visited link */
a:visited {
  color: white;
}

/* mouse over link */
a:hover {
  color: white;
}

/* selected link */
a:active {
  color: white;
}

Content Editor

The content Editor at the bottom of the page is only relevant when you want to use the custom post type page yoursite.com/scrollsequence/post-name if you want to add a scrollsequence to your blog, you don't need to do this as just the [scrollsequence id="###"] will be part of your blog post, where you insert the [shortcode].

Since we are showcasing what can be done in scrollsequence and the example URL is https://scrollsequence.com/scrollsequence/cyberpunk/ here is what you enter into the Content Editor

[scrollsequence margintop="-150px" marginbottom="-300px" ]
<h2 class="ssq-white" style="text-align: center;">Create scroll animation in few steps</h2>
<div class="ssq-white" style="position: relative; z-index: 5; margin: auto; max-width: 800px;">
<ol>
 	<li>Take any video and convert it to image sequence.</li>
 	<li>Upload images to WordPress</li>
 	<li>Write content in Rich Text Editor</li>
 	<li>Done!</li>
</ol>
https://youtu.be/vpnEgTMyfWQ

</div>

The [scrollsequence] shortcode is without an id, because the ID gets taken from the current Scrollsequence as we are using in inside its own custom post type.

Then we are setting margintop to -150 px to bring up the scrollsequence to the top of the page and marginbottom to -300 px to overlap the scrollsequence with the text after the sequence to have a seamless transition after the sequence ends.

An that's it! You can see the result on our example page.