Animation in Sections of the site [duplicate]

Question

Animation in Sections of the site [duplicate]

Navigation

#1 by (3 votes)
#2 by (1 votes)

0

I want to do something like this on my site:

link

As it rolls down, the movements of div's type a fade in and fade out .

Is there any tutorial to do this? I'm using animatescroll.js to navigate.

jquery

asked by anonymous 14.10.2014 / 18:48

2 answers

JSON handling returned from PHP Displaying the Same Record Twice [duplicate]

score 3 · Answer 1

With a 2-minute Google search, I found the ScrollMagic plugin.

Here are some examples. And here is 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>

score 1 · Answer 2

An example to get you started:

O 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 id of the divs in 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