Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="bcg">
  <div class="hero">
 
    <!-- Top part -->
    <div class="top">
 
      <!-- Slide 1 top content -->
      <div class="homeSlide slide01 active">
 
        <h1>Green<span>Sock</span> Tilt Effect</h1>
 
      </div>
 
      <!-- Slide 2 top content -->
      <div class="homeSlide slide02">
 
        <h1>Split Screen Slider</h1>
 
      </div>
 
      <!-- Slide 3 top content -->
      <div class="homeSlide slide03">
 
        <h1>Slide 3 Title</h1>
 
      </div>
 
    </div><!-- /Top part -->
 
    <!-- Bottom part -->
    <div class="bottom">
 
      <!-- Slide 1 bottom content -->
      <div class="homeSlide slide01 active">
 
        <p>
          Move your mouse to see the tilt effect in action.<br />
          <em>Your current position is: <strong>0, 0</strong></em>
        </p>
 
      </div>
 
      <!-- Slide 2 bottom content -->
      <div class="homeSlide slide02">
 
        <p>
          Another slide description goes here.
        </p>
 
      </div>
 
      <!-- Slide 3 bottom content -->
      <div class="homeSlide slide03">
 
        <p>
          Another slide description goes here.
        </p>
 
      </div>
 
    </div><!-- /Bottom part -->
 
    <!-- Fancy divider with gradient backgound -->
    <div class="divider"></div>
 
  </div>
 
  <!-- Prev/Next Navigation -->
  <div id="slideNav">
    <ul>
      <li class="slideNavPrev">
        <a href="#" title="Go to previous slide">
          <span class="ico ico-up">↓</span>
        </a>
      </li>
      <li class="slideNavNext">
        <a href="#" title="Go to next slide">
          <span class="ico ico-down">↑</span>
        </a>
      </li>
    </ul>
  </div>
 
</div>
              
            
!

CSS

              
                .logo {
  position: absolute;
  top: 50px;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 6;
  opacity: 0.3;
}
 
.bcg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
 
h1 {
  color: #ffffff;
  font-weight: 300;
  position: absolute;
  bottom: 0%;
  width: 100%;
  margin: 0 0 20px 0;
  font-size: 60px;
  text-align: center;
}
 
.hero {
  position: absolute;
  height: 100%;
  width: 100%;
}
 
.top {
  overflow: hidden;
  position: absolute;
  top: 30px;
  left: 30px;
  right: 30px;
  bottom: 50%;
  border: 1px rgba(255, 255, 255, 0.2) solid;
  border-width: 1px 1px 0 1px;
}
 
.homeSlide {
  position: absolute;
  width: 100%;
  height: 100%;
}
.homeSlide.slide01 {
  background: url(https://ihatetomatoes.net/demos/greensock-image-slideshow/img/img_clouds-top.jpg) no-repeat bottom center;
  background-size: cover;
}
.bottom .homeSlide.slide01 {
  background: url(https://ihatetomatoes.net/demos/greensock-image-slideshow/img/img_clouds-bottom.jpg) no-repeat top center;
  background-size: cover;
}
.homeSlide.slide02 {
  background: url(https://ihatetomatoes.net/demos/greensock-image-slideshow/img/img_clouds-top2.jpg) no-repeat bottom center;
  background-size: cover;
}
.bottom .homeSlide.slide02 {
  background: url(https://ihatetomatoes.net/demos/greensock-image-slideshow/img/img_clouds-bottom2.jpg) no-repeat top center;
  background-size: cover;
}
.homeSlide.slide03 {
  background: url(https://ihatetomatoes.net/demos/greensock-image-slideshow/img/img_clouds-top3.jpg) no-repeat bottom center;
  background-size: cover;
}
.bottom .homeSlide.slide03 {
  background: url(https://ihatetomatoes.net/demos/greensock-image-slideshow/img/img_clouds-bottom3.jpg) no-repeat top center;
  background-size: cover;
}
 
.divider {
  z-index: 3;
  position: fixed;
  top: 50%;
  margin-top: -40px;
  left: -200px;
  right: -200px;
  height: 40px;
  background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 0%, rgba(34, 34, 34, 0) 100%);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(34, 34, 34, 0) 100%);
}
 
.bottom {
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 30px;
  right: 30px;
  bottom: 30px;
  border: 1px rgba(255, 255, 255, 0.2) solid;
  border-width: 0 1px 1px 1px;
}
.bottom p {
  font-size: 20px;
  color: #ffffff;
  font-weight: 300;
  opacity: 0.7;
  text-align: center;
}
.bottom a {
  color: #fff;
}
 
#slideNav {
  z-index: 5;
  position: fixed;
  right: 50px;
  top: 50%;
  width: 50px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
 
#slideNav ul {
  list-style: none;
  color: #ffffff;
  font-size: 13px;
  text-align: center;
  margin: 0;
  padding: 0;
}
 
#slideNav li {
  width: 50px;
  height: 50px;
  line-height: 50px;
  background-color: rgba(0, 0, 0, 0.7);
  margin-bottom: 1px;
}
 
#slideNav a {
  display: block;
  width: 50px;
  height: 50px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: #ffffff;
}
              
            
!

JS

              
                // Setup variables
var $activeSlide = $(".active"),
    $homeSlide = $(".homeSlide"),
    $slideNavPrev = $(".slideNavPrev"),
    $slideNavNext = $(".slideNavNext")
    $slideNavPrevA = $(".slideNavPrev a"),
    $slideNavNextA = $(".slideNavNext a"),
    $hero = $(".hero");

// Init function that run on page load
function init(){
 
  // Hide all slides apart from the active one
  TweenLite.set($homeSlide.not($activeSlide), {autoAlpha: 0});
 
  // Disable arrow down on page load
  TweenLite.set($slideNavPrev, {autoAlpha: 0.2});
 
}
 
// Run Init function
init();

// Go to next slide
function goToNextSlide(){
 
  alert('Go to next');
 
}
 
// Navigation click - go to the Next Slide
$slideNavNext.click(function (e) {
  e.preventDefault();
 
  goToNextSlide();
 
});

$slideNavNext.click(function (e) {
  e.preventDefault();
 
  var slideOut = $('.homeSlide.active'),
      slideIn = $('.homeSlide.active').next('.homeSlide');
 
  goToNextSlide(slideOut, slideIn);
 
});

// Go to next slide - pass 2 parameters - slideOut and slideIn
function goToNextSlide(slideOut, slideIn){
  var tl = new TimelineLite(),
    slideOutH1 = slideOut.find('h1'),
    slideOutP = slideOut.find('p'),
    slideInH1 = slideIn.find('h1'),
    slideInP = slideIn.find('p'),
    index = slideIn.index(),
    size = $('.top .homeSlide').length;
 
    if(slideIn.length !== 0){
 
        // go to the next slide timeline
        tl
            // move the new slide (the one about to enter viewport) out of the viewport and add class active
            .set(slideIn, {y: '100%', autoAlpha: 1, className: '+=active'})
            // remove class active from the currently active slide (slideOut)
            .set(slideOut, {className: '-=active'})
            // animate H1 and p of the active slide up and fade them out
            .to([slideOutH1,slideOutP], 0.3, {y: '-=15px', autoAlpha: 0, ease:Power3.easeInOut}, 0)
            // animate active slide up (out of the viewport)
            .to(slideOut, 0.5, {y: '-100%', ease:Power3.easeInOut}, 0)
            // animate new slide up (from out of the viewport)
            .to(slideIn, 0.5, {y: '-=100%', ease:Power3.easeInOut}, 0)
            // animate H1 and P of the new slide up and fade them in
            .fromTo([slideInH1,slideInP], 0.3, {y: '+=20px', autoAlpha: 0}, {autoAlpha: 1, y: 0, ease:Power1.easeInOut}, 0.3);
 
    }
 
    // Fade out arrow up and fade in arrow down
 
    // Fade in arrow down
    TweenLite.set($slideNavPrev, {autoAlpha: 1});
 
    // Fade out arrow up on last slide
    if(index === size){
      TweenLite.to($slideNavNext, 0.3, {autoAlpha: 0.2, ease:Linear.easeNone});
    }
 
}
 
// Navigation click - go to the Next Slide
$slideNavNext.click(function (e) {
  e.preventDefault();
 
  var slideOut = $('.homeSlide.active'),
      slideIn = $('.homeSlide.active').next('.homeSlide');
 
  goToNextSlide(slideOut, slideIn);
 
});

// Go to previous slide - pass 2 parameters - slideOut and slideIn
function goToPreviousSlide(slideOut, slideIn){
 
  var tl = new TimelineLite(),
    slideOutH1 = slideOut.find('h1'),
    slideOutP = slideOut.find('p'),
    slideInH1 = slideIn.find('h1'),
    slideInP = slideIn.find('p'),
    index = slideIn.index(),
    size = $('.top .homeSlide').length;
 
  if(slideIn.length !== 0){
 
    // go to the previous slide timeline
    tl
      // move the new slide (the one about to enter viewport) out of the viewport (to the top)
      .set(slideIn, {y: '-100%', autoAlpha: 1, className: '+=active'})
      // remove class active from the currently active slide (slideOut)
      .set(slideOut, {className: '-=active'})
      // animate H1 and p of the active slide down and fade them out
      .to([slideOutH1,slideOutP], 0.3, {y: '+=15px', autoAlpha: 0, ease:Power3.easeInOut}, 0)
      // animate active slide down (out of the viewport)
      .to(slideOut, 0.5, {y: '100%', ease:Power3.easeInOut}, 0)
      // animate new slide down (from out of the viewport)
      .to(slideIn, 0.5, {y: '+=100%', ease:Power3.easeInOut}, '-=0.5')
      // animate H1 and P of the new slide down and fade them in
      .fromTo([slideInH1,slideInP], 0.3, {y: '-=20px', autoAlpha: 0}, {autoAlpha: 1, y: 0, ease:Power1.easeInOut}, 0.3);
 
  }
 
  // Fade in arrow up
  TweenLite.set($slideNavNext, {autoAlpha: 1});
 
  // Fade out arrow down on first slide
  if(index === 1){
    TweenLite.to($slideNavPrev, 0.3, {autoAlpha: 0.2, ease:Linear.easeNone});
  }
 
}
 
// Navigation click - go to the Previous Slide
$slideNavPrev.click(function (e) {
  e.preventDefault();
 
  var slideOut = $('.homeSlide.active'),
      slideIn = $('.homeSlide.active').prev('.homeSlide');
 
  goToPreviousSlide(slideOut, slideIn);
 
});

// Mouse move tilt effect
$(document).mousemove(function(event){
 
    // Detect mouse position
    var xPos = (event.clientX/$(window).width())-0.5;
    var yPos = (event.clientY/$(window).height())-0.5;
 
    // Tilt the hero container
    TweenLite.to($hero, 0.6, {rotationY:5*xPos, rotationX:5*yPos, ease:Power1.easeOut, transformPerspective:900, transformOrigin:"center"});
 
    // Update text on the page with the current mouse position
    $(".bottom strong").text(event.pageX + ", " + event.pageY);
});

// Mouse move tilt effect
$(document).mousemove(function(event){
 
    // Detect mouse position
    var xPos = (event.clientX/$(window).width())-0.5;
    var yPos = (event.clientY/$(window).height())-0.5;
 
    // Tilt the hero container
    TweenLite.to($hero, 0.6, {rotationY:5*xPos, rotationX:5*yPos, ease:Power1.easeOut, transformPerspective:900, transformOrigin:"center"});
 
    // Update text on the page with the current mouse position
    $(".bottom strong").text(event.pageX + ", " + event.pageY);
});


              
            
!
999px

Console