Animation in Site Sections

Question

Animation in Site Sections

Asked 10 years, 1 month ago

Viewed 185 times

0

I want to do something like this on my website:

http://themeforest.net/item/square-portfolio-responsive-html-template/6853295

As he rolls down, the movements of div's is like a fade in and fade out.

Is there a tutorial for doing this? I’m using the animatescroll.js to navigate.

1

Instead of asking us to look at an external website, you could look at the code they’re using, show your own code and ask for help from there. If you search the @Sergio answers above you will find much example of a lot of good thing. So that’s it, research, specific question and forward ball!

– brasofilo

2014/10/14 at 18:33

2 answers

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.

by KaduAmaral • **11,472** points · Answer 1 · 2014-10-14T17:02:09+00:00

With a 2 minute search on Google, I found the plugin Scrollmagic.

Here are some examples.
And here’s the documentation.

Functional code

/*
   Containers
*/
#content-wrapper, #example-wrapper {
   height: 100%;
}
.scrollContainer {
   overflow-y: scroll;
   overflow-x: hidden;
   width: 100%
}
.scrollContainer {
   height: 100%;
   margin: auto;
}
#example-wrapper .scrollContent {
   height: 100%;
}

.horizontal.scrollContainer {
   overflow-y: hidden;
   overflow-x: scroll;
}
#example-wrapper.scrollContainer .scrollContent {
   width: 100%;
   height: auto;
}
#example-wrapper.scrollContainer.horizontal .scrollContent {
   width: auto;
   height: 100%;
}
#example-wrapper.horizontal {
   white-space: nowrap;
   font-size: 0;  /* fix for spaces between inline block divs */
}
#example-wrapper.horizontal div {
   font-size: 13px;
}
#example-wrapper .scrollContent, #example-wrapper.horizontal .scrollContent {
   font-size: 0;
}
#example-wrapper .scrollContent div {
   font-size: 13px;
}
#example-wrapper section {
}

section#titlechart {
   text-align: center;
   position: relative;
   height: 100%;
   min-height: 500px;
   min-width: 100%;
}
.horizontal section {
   display: inline-block;
   vertical-align: top;
   height: 100%;
}
section#titlechart #description {
   top: 50%;
   left: 50%;
   position: absolute;
   width: 600px;
   height: 200px;
   margin: -100px auto auto -300px;
}
section#titlechart #description h1 {
   margin: 0;
}
section#titlechart #description h2 {
   margin-bottom: 20px;
}
section#titlechart #description a.viewsource {
   display: block;
   margin-bottom: 20px;
}
section#titlechart #description code {
   background-color: #E1F1FF;
   padding-left: 2px;
   padding-right: 2px;
   white-space: nowrap;
}

section#titlechart #description ol, section#titlechart #description p {
   text-align: left;
   max-width: 400px;
   margin: 10px auto 10px auto;
   white-space: normal;
}
section#titlechart #description ol {
   list-style-position: outside;
}
#example-wrapper section#titlechart #description:after {
   content: "â†§";
   font-size: 40px;
}
#example-wrapper.horizontal section#titlechart #description:after {
   content: "â†¦";
}


section.demo * {
   font-size: 13px;
}
section.demo {
   font-size: 0;
   text-align: center;
}
section.demo.fullheight {
   min-height: 100%;
}
section.demo.doublewidth, .spacer.doublewidth {
   min-width: 200%;
}
.horizontal section.demo {
   text-align: inherit;
   white-space: nowrap;
}
.horizontal section.demo.fullwidth {
   min-width: 100%;
}

/*
   Elements
*/
.spacer {
   text-align: center;
   min-height: 100px;
}
.spacer.s0 {
   min-height: 1px;
}
.spacer.s1 {
   min-height: 100px;
}
.spacer.s2 {
   min-height: 200px;
}
.spacer.s3 {
   min-height: 300px;
}
.spacer.s4 {
   min-height: 400px;
}
.spacer.s5 {
   min-height: 500px;
}
.spacer.s6 {
   min-height: 600px;
}
.spacer.s7 {
   min-height: 700px;
}
.spacer.s8 {
   min-height: 800px;
}
.spacer.s9 {
   min-height: 900px;
}
.spacer.s10 {
   min-height: 1000px;
}
.spacer.s_viewport {
   min-height: 100%;
}
.horizontal .spacer {
   background-image: url("../img/example_bg_spacer_h.gif");
   margin-bottom: 0;
   min-height: initial;
   min-width: 100px;
   height: 100%;
   display: inline-block;
   vertical-align: top;
}
.horizontal .spacer.s0 {
   min-width: 1px;
}
.horizontal .spacer.s1 {
   min-width: 100px;
}
.horizontal .spacer.s2 {
   min-width: 200px;
}
.horizontal .spacer.s3 {
   min-width: 300px;
}
.horizontal .spacer.s4 {
   min-width: 400px;
}
.horizontal .spacer.s5 {
   min-width: 500px;
}
.horizontal .spacer.s6 {
   min-width: 600px;
}
.horizontal .spacer.s7 {
   min-width: 700px;
}
.horizontal .spacer.s8 {
   min-width: 800px;
}
.horizontal .spacer.s9 {
   min-width: 900px;
}
.horizontal .spacer.s10 {
   min-width: 1000px;
}
.spacer.s_viewport {
   min-width: 100%;
}

.box1, .box2, .box3 {
   display: inline-block;
   position: relative;
   border-radius: 8px;
   text-align: center;
   vertical-align: middle;
   padding: 0 5px;
}
.box1 {
   min-width: 100px;
   height: 100px;
   margin: 0 auto 0 auto;
}
.box2 {
   min-width: 50px;
   height: 50px;
   margin: 25px auto 25px auto;
}
.box3 {
   min-width: 26px;
   height: 26px;
   margin: 37px auto 37px auto;
}
.horizontal .box1 {
   top: 50%;
   max-height: 100px;
   margin: -50px 0 auto 0;
}
.horizontal .box2 {
   top: 50%;
   max-height: 50px;
   margin: -25px 25px auto 25px;
}
.horizontal .box3 {
   top: 50%;
   max-height: 26px;
   margin: -13px 37px auto 37px;
}
.box1 p, .box2 p, .box3 p {
   margin: 5px 15px 5px 15px;
   font-size: 13px;
   font-weight: lighter;
   color: white;
}
.box1 p:first-child {
   margin-top: 27px;
}
.box1 a, .box2 a, .box3 a {
   color: white;
}
.box1.white *, .box2.white *, .box3.white * {
   color: #2e639e;
}
.box2.mario {
   background-color: #004fae;
   border-top: 30px solid #fc112f;
   border-bottom: 10px solid #c4723b;
}
.box3.goomba {
   min-width: 30px;
   height: 4px;
   margin-top: 75px;
   margin-left: 30px;
   margin-bottom: 25px;
   background-color: #b39475;
   border-top: 30px solid #744527;
   border-bottom: 6px solid #c4723b;
}
/*
   colors
*/

.box1.outline, .box2.outline, .box3.outline {
   border: 1px solid white;
}
.blue {
   background-color: #3883d8;
}
.skin {
   background-color: #ED9F4C;
}
.black {
   background-color: #000000;
}
.white {
   background-color: #FFFFFF;
}
.red {
   background-color: #cf3535;
}
.green {
   background-color: #00af10;
}
.orange {
   background-color: #ea6300;
}
/*
   Form
*/
form.move {
   text-align: left;
   position: fixed;
   top: 30px;
   left: 20px;
   display: block;
   background-color: white;
   background-color: rgba(255, 255, 255, 0.9);
   border-radius: 4px;
   padding: 20px;
   z-index: 20;
}
form > div, form > fieldset > div {
   margin: 10px 0 10px 0;
   display: block;
}
form .slider {
   min-width: 199px;
   display: inline-block;
   position: relative;
   height: 9px;
   border-right: 1px solid #2e639e;
   border-left: 1px solid #2e639e;
   vertical-align: middle;
   margin-right: 5px;
}
form .slider .trackbar {
   margin-top: 4px;
   border-top: 1px solid #2e639e;
   height: 4px;
}
form .slider .handle {
   height: 14px;
   width: 6px;
   position: absolute;
   top: -4px;
   margin-left: -4px;
   left: 0%;
   background-color: white;
   border-radius: 4px;
   cursor: pointer;
   border: 1px solid #2e639e;
}
form .slider .handle:hover, form .slider.dragging .handle {
   background-color: #79b0ee;
}
form .slider + input {
   background-color: transparent;
   border: none;
   padding: 0;
}
form #options label, form #actions label, form #tweenparams label {
   min-width: 90px;
   text-align: right;
   display: inline-block;
   margin-right: 10px;
}
form #tweenparams label {
   min-width: 50px;
}
form #options button {
   width: 65px;
}
form fieldset {
   padding: 0 10px 0 10px;
   margin: 5px 0 0 0;
}
form fieldset:first-child {
   margin-top: -5px;
}
form fieldset legend {
   padding: 0 5px 0 5px;
   margin: 0;
}

.move {
   cursor: move;
}
.move * {
   cursor: auto;
}
.move label {
   cursor: default;
}

/*
   MENU
*/

ul#menu, ul#menu ul {
   list-style: none;
   padding: 0;
}

ul#menu {
   position: fixed;
   z-index: 999;
   width: 500px;
   left: 50%;
   margin: 10px auto auto -250px;
   text-align: center;
}

#titlechart ul#menu {
   margin-top: 40px;
   position: static;
   z-index: inherit;
   width: auto;
   left: auto;
   margin: 40px auto auto auto;
}
ul#menu > li {
   display: inline-block;
   margin: 0 5px 0 5px;
   position: relative;
   min-height: 30px;
   border-radius: 4px;
   background-color: #79b0ee;
   vertical-align: top;
   min-width: 152px;
}
ul#menu li a {
   padding: 0 5px 0 5px;
   display: block;
   text-decoration: none;
   line-height: 30px;
   color: white;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   font-size: 15px;
}
ul#menu ul {
   display: none;
}

ul#menu li:hover > a {
   color: #2e639e;
}
html.touch ul#menu li:hover > a {
   color: white;
}
html.touch ul#menu li:hover ul {
   display: none;
}
ul#menu li:hover ul, html.touch ul#menu li.open ul {
   display: block;
   width: 100%;
   padding: 5px 0 5px 0;
   border-top: 1px dashed white;
}
ul#menu ul li a {
   text-transform: none;
   font-size: 11px;
   line-height: 20px;
   font-weight: lighter;
   color: #133f71;
}
ul#menu ul li a:hover {
   background-color: #3883d8;
   color: white;
}

.menuwrap {
   position: fixed;
   background-color: white;
   background-color: rgba(255, 255, 255, 0.9);
   min-width: 500px;
   left: 50%;
   margin-left: -250px;
   min-height: 51px;
   top: -51px;
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
   z-index: 998;
   text-align: center;
   transition: top 0.5s;
   -webkit-transition: top 0.5s; /* Safari */
   transition-delay: 1s;
   -webkit-transition-delay: 1s; /* Safari */
}
.menuwrap:hover, .menuwrap.open {
   top: 0px;
   transition-delay: 0s;
   -webkit-transition-delay: 0s; /* Safari */
}
.menuwrap ul#menu {
   position: absolute;
}
.menuwrap div.flag {
   top: 51px;
   position: absolute;
   width: 60px;
   left: inherit;
   left: 50%;
   color: #2e639e;
   margin-left: -30px;
   background-color: inherit;
   line-height: 20px;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   font-size: 11px;
   text-transform: uppercase;
   transition: top 0.5s;
   -webkit-transition: top 0.5s; /* Safari */
   transition-delay: 1.5s;
   -webkit-transition-delay: 1.5s; /* Safari */
}
.menuwrap:hover div.flag, .menuwrap.open div.flag {
   opacity: 0;
   top: -20px;
   transition: top 0.1s;
   -webkit-transition: top 0.1s; /* Safari */
   transition-delay: 0.5s;
   -webkit-transition-delay: 0.5s; /* Safari */
}
html.touch .menuwrap.open div.flag {
   top: -50px;
}
html.touch .menuwrap div.flag {
   width: 100px;
   margin-left: -50px;
   font-size: 25px;
   line-height: 50px;
}
html.touch .menuwrap div.flag {
   /*opacity: 1;
   top: 51px;*/
}
/*
   Codecontainer
*/
#codecontainer {
   position: fixed;
   top: 30px;
   bottom: 20px;
   right: 20px;
   left: 20px;
   background-color: white;
   border-radius: 4px;
   z-index: 900;
   min-height: 300px;
}
#codecontainer pre {
   margin: 0;
   padding: 0;
   line-height: 16px;
   tab-size: 4;
}
#codecontainer pre .break {
   background-color: #F6F6F6;
   font-weight: bold;
   color: #aaa;
}
#codecontainer pre .break:before {
   content: "áŽ’"
}
#codecontainer .codewrap {
   position: absolute;
   top: 10px;
   bottom: 10px;
   width: 100%;
   overflow: hidden;
   overflow: scroll;
   white-space: nowrap;
}
#codecontainer .code, #codecontainer .linenumbers {
   min-height: 100%;
}
#codecontainer .code {
   padding: 0;
   display: inline-block;
}
#codecontainer .code {
   padding: 0 15px 10px 5px;
}
#codecontainer .linenumbers {
   float: left;
   padding: 0px 5px 0px 10px;
   color: #aaa;
   text-align: right;
   border-right: 1px solid #e5e5e5;
}
#codecontainer span.indent {
   width: 31px;
   display: inline-block;
   white-space: nowrap;
}
#codecontainer #close.button {
   position: fixed;
   top: 20px;
   right: 10px;
   width: 20px;
   height: 20px;
}
#codecontainer #select.button {
   position: fixed;
   top: 20px;
   right: 40px;
   height: 20px;
   padding: 0 10px 0 10px;
}
#codecontainer #close.button:after {
   content: "à¾¾";
}
#codecontainer .button {
   background-color: white;
   border-radius: 10px;
   border: 1px solid #e5e5e5;
   text-align: center;
   cursor: pointer;
   color: #2e639e;
}
#codecontainer .button:hover {
   background-color: #3883d8;
   color: white;
}

/*
   OTHER
*/
a.viewsource:after {
   content: " }";
}
a.viewsource:before {
   content: "{ ";
}

#parallaxContainer {
   width: 900px;
   height: 500px;
   top: 30px;
   position: relative;
}
#parallaxContainer .layer1 {
   height: 100%;
   text-align: center;
   background-image: url("../img/example_parallax_l1.gif");
}
#parallaxContainer .layer2 {
   background-image: url("../img/example_parallax_l2.png");
   position: absolute;
   height: 139px;
   width: 100%;
   bottom: 32px
}
#parallaxContainer .layer3 {
   background-image: url("../img/example_parallax_l3.gif");
   position: absolute;
   height: 32px;
   width: 100%;
   bottom: 0px;
}
#parallaxText {
   width: 0;
   height: 100%;
   margin: auto;
   position: relative;
}
#parallaxText .layer1, #parallaxText .layer2, #parallaxText .layer3 {
   position: absolute;
   font-size: 50px;
   line-height: 50px;
   margin-left: -150px;
   margin-top: -25px;
   width: 300px;
   top: 50%;
   left: 50%;
   text-align: center;
   color: #133f71;
}
#parallaxText .layer1 {
   top: 48%;
}
#parallaxText .layer2 {
   top: 49%;
}
#parallaxText .layer3 a {
   display: block;
   font-family: "Source Sans Pro", Arial, sans-serif;
   font-style: normal;
   font-weight: normal;
}
#parallax1, #parallax2, #parallax3 {
   position: relative;
   overflow: hidden;
   height: 100vh;
}
#parallax1 > div, #parallax2 > div, #parallax3 > div {
   position: relative;
   height: 200%;
   -webkit-transform: translateZ(0);-webkit-backface-visibility: hidden;-webkit-perspective: 1000;
}

.dynamicContent #content {
   width: 480px;
   margin: auto;
   text-align: left;
}
.dynamicContent #content .box1 {
   margin: 10px;
}

.dynamicContent #loader {
   height: 0;
   overflow: hidden;
   line-height: 60px;
}
.dynamicContent #loader.active {
   height: 60px;
}
.dynamicContent #loader img {
   vertical-align: text-bottom;
}

#customactions {
   height: 160px;
   width: 170px;
   margin: auto;
   padding-top: 40px;
   text-align: left;
}
#customactions label {
   width: 100px;
   display: inline-block;
}
#customactions code {
   color: #3883d8;
}
#customactions a.viewsource {
   margin-top: 20px;
   display: block;
   text-align: center;
}
.demo.responsiveDuration {
   position: relative;
}
.responsiveDuration .box1 {
   top: 50%;
   left: 50%;
   position: absolute;
   margin-top: -50px;
   margin-left: -50px;
}
#destroybox a {
   display: block;
   margin-top: 20px;
}
#destroybox a.disabled {
   color: #79b0ee;
}
#mobileadvanced {
   width: 150px;
   height: 150px;
}
#mobileadvanced p {
   margin-top: 50px;
}
#multiDirect {
   text-align: left;
}
#multiDirect .box1 {
   margin: 200px auto auto 200px;
}
#multiDirect .box1 p:first-child {
   margin-top: 20px;
}

#imagesequence {
   height: 300px;
}

.copyright {
   font-variant: italic;
   font-size: 11px;
}

#bezier {
   overflow: hidden;
   position: relative;
}
#bezier #plane {
   position: absolute;
   left: -100px;
}
#bezier a.viewsource {
   margin: 100px;
   display: inline-block;
}

/*

Codehighlighting
github.com style (c) Vasily Polovnyov <[email protected]>

*/

.hljs {
  display: block; padding: 0.5em;
  color: #333;
  /*background: #f8f8f8*/
}

.hljs-comment,
.hljs-template_comment,
.diff .hljs-header,
.hljs-javadoc {
  color: #998;
  font-style: italic
}

.hljs-keyword,
.css .rule .hljs-keyword,
.hljs-winutils,
.javascript .hljs-title,
.nginx .hljs-title,
.hljs-subst,
.hljs-request,
.hljs-status {
  color: #333;
  font-weight: bold
}

.hljs-number,
.hljs-hexcolor,
.ruby .hljs-constant {
  color: #099;
}

.hljs-string,
.hljs-tag .hljs-value,
.hljs-phpdoc,
.tex .hljs-formula {
  color: #d14
}

.hljs-title,
.hljs-id,
.coffeescript .hljs-params,
.scss .hljs-preprocessor {
  color: #900;
  font-weight: bold
}

.javascript .hljs-title,
.lisp .hljs-title,
.clojure .hljs-title,
.hljs-subst {
  font-weight: normal
}

.hljs-class .hljs-title,
.haskell .hljs-type,
.vhdl .hljs-literal,
.tex .hljs-command {
  color: #458;
  font-weight: bold
}

.hljs-tag,
.hljs-tag .hljs-title,
.hljs-rules .hljs-property,
.django .hljs-tag .hljs-keyword {
  color: #000080;
  font-weight: normal
}

.hljs-attribute,
.hljs-variable,
.lisp .hljs-body {
  color: #008080
}

.hljs-regexp {
  color: #009926
}

.hljs-symbol,
.ruby .hljs-symbol .hljs-string,
.lisp .hljs-keyword,
.tex .hljs-special,
.hljs-prompt {
  color: #990073
}

.hljs-built_in,
.lisp .hljs-title,
.clojure .hljs-built_in {
  color: #0086b3
}

.hljs-preprocessor,
.hljs-pragma,
.hljs-pi,
.hljs-doctype,
.hljs-shebang,
.hljs-cdata {
  color: #999;
  font-weight: bold
}

.hljs-deletion {
  background: #fdd
}

.hljs-addition {
  background: #dfd
}

.diff .hljs-change {
  background: #0086b3
}

.hljs-chunk {
  color: #aaa
}

<script type="text/javascript" src="//janpaepke.github.io/ScrollMagic/js/_dependent/greensock/TweenMax.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//janpaepke.github.io/ScrollMagic/js/jquery.scrollmagic.js"></script>
<script type="text/javascript" src="//janpaepke.github.io/ScrollMagic/js/jquery.scrollmagic.debug.js"></script>

<div class="scrollContent">
   <section class="demo">
      <div class="spacer s2"></div>
      <div id="trigger1" class="spacer s0"></div>
      <div id="animate1" class="box2 skin">
         <p>You wouldn't like me, when I'm angry!</p>
         <a href="#" class="viewsource">view source</a>
      </div>
      <div class="spacer s2"></div>
      <script>
         var controller;
         $(document).ready(function($) {
            // init controller
            controller = new ScrollMagic();
            // build tween
            var tween = TweenMax.to("#animate1", 0.5, {backgroundColor: "green", scale: 2.5});

            // build scene
            var scene = new ScrollScene({triggerElement: "#trigger1"})
                        .setTween(tween)
                        .addTo(controller);

            // show indicators (requires debug extension)
            scene.addIndicators();
         });
      </script>
   </section>
   <section class="demo">
      <div class="spacer s1"></div>
      <div id="trigger2" class="spacer s1"></div>
      <div class="spacer s0"></div>
      <div id="animate2" class="box1 black">
         <p>Smurf me!</p>
         <a href="#" class="viewsource">view source</a>
      </div>
      <div class="spacer s2"></div>
      <script>
         $(document).ready(function($) {
            // build tween
            var tween = TweenMax.fromTo("#animate2", 0.5, 
                  {"border-top": "0px solid white"},
                  {"border-top": "30px solid white", backgroundColor: "blue", scale: 0.7}
               );

            // build scene
            var scene = new ScrollScene({triggerElement: "#trigger2", duration: 300})
                        .setTween(tween)
                        .addTo(controller);

            // show indicators (requires debug extension)
            scene.addIndicators();
         });
      </script>
   </section>
   <div class="spacer s_viewport"></div>
</div>

by Diego Zanardo • **3,301** points · Answer 2 · 2014-10-14T18:41:15+00:00

An example for you to have a start:

The jquery:

var divs = new Array("#descricao", "#imagem");
$(document).scroll(function () {
    var y = $(this).scrollTop();

    divs.forEach(function (entry) {
        if (y > ($(entry).offset().top - 900)) {
            $(entry).children("div").fadeIn(2000);           
        }
    });
});

Add the Divs id to the Array:

var divs = new Array("#descricao");

Then just add the Divs:

<div id="descricao">
        <div class="invisivel">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
        </div>
</div>

Jsfiddle