Green SockとSUPER SCROLL ORAMAでスクロールに合わせて要素を出す方法。

公式のgithubからダウンロードしてきたJSフォルダをそのまま放り込み、この２つのファイルだけ読み込みます。

<script language="javascript" type="text/javascript" src="js/superscrollorama/jquery.superscrollorama.js"></script>
<script language="javascript" type="text/javascript" src="js/superscrollorama/greensock/TweenMax.min.js"></script>

 

SUPER SCROLL ORAMA公式サイト

http://johnpolacek.github.io/superscrollorama/

公式サイトは英語ですが、使い方が書かれているので参考なります。

 

デモサイト

https://webcreator.webmeo.org/demo/super_scroll_orama/

 

使い方

html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=1180, maximum-scale=1.0, user-scalable=yes">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="format-detection" content="telephone=no">
<!-- js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="js/superscrollorama/jquery.superscrollorama.js"></script>
<script language="javascript" type="text/javascript" src="js/superscrollorama/greensock/TweenMax.min.js"></script>
<script language="javascript" type="text/javascript" src="js/func.js"></script>
<!-- css -->
<link rel="stylesheet" href="css/basic.css" type="text/css" />
<link rel="stylesheet" href="css/common.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<title>demo</title>

<!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/css3-mediaqueries.js"></script>
    <![endif]-->
</head>
<body>

<header>
<p class="tac">demo</p>
</header>
<main>
  <div class="container">
    <article>
      <section class="sec01">
        <p class="st">左からフェードイン</p>
        <ul class="flex_no_justify">
          <li class=" fade01"><img src="images/common/dummy.jpg" alt=""></li>
          <li class=" fade02"><img src="images/common/dummy.jpg" alt=""></li>
          <li class=" fade03"><img src="images/common/dummy.jpg" alt=""></li>
        </ul>
      </section>
      <section class="sec02">
        <p class="st">上がりながらフェードイン</p>
        <ul class="flex_no_justify">
          <li class=" fade01"><img src="images/common/dummy.jpg" alt=""></li>
          <li class=" fade02"><img src="images/common/dummy.jpg" alt=""></li>
          <li class=" fade03"><img src="images/common/dummy.jpg" alt=""></li>
        </ul>
      </section>
      
    </article>
  </div>
</main>
<footer id="footer">
  <small></small> </footer>
</body>
</html>

 

 

css

header {
  padding: 100px 0 ;
}
article {
  padding: 500px 0 ;
}
.sec01 {
width: 1000px;
margin:  0 auto 300px;
}

.sec01 ul li {
width:  33%;
}
.sec02 {
width: 1000px;
margin:  0 auto 300px;
}

.sec02 ul li {
width:  33%;
}
.sec02 .fade01 {
position: relative;
top: 0;
}
.sec02 .fade02 {
position: relative;
top: 0;
}
.sec02 .fade03 {
position: relative;
top: 0;
}

 

jsコード

$(document).ready(function(){
  var movetime = 1;//動作時間
  var movestart = 0; //起動タイミング
  var movewidth = 100; //動作距離

  var controller = $.superscrollorama({
  playoutAnimations: true
  });

  //左からフェードイン
  controller.addTween(
  $('.sec01'),
  (new TimelineLite())
   .append([
     TweenMax.fromTo($('.sec01 .fade01'), (movetime * 2), 
       {css:{opacity: 0}, immediateRender:true}, 
       {delay:0, css:{opacity: 1}}),
     TweenMax.fromTo($('.sec01 .fade02'), (movetime * 2), 
       {css:{opacity: 0}, immediateRender:true}, 
       {delay:0.2, css:{opacity: 1}}),
     TweenMax.fromTo($('.sec01 .fade03'), (movetime * 2), 
       {css:{opacity: 0}, immediateRender:true}, 
       {delay:0.4, css:{opacity: 1}}),
   ]),
  movestart, // scroll duration of tween
  false,  //offset
  false  //reverse
  );


  //上がりながらフェードイン
  $('.sec02 li').each(function(){
      controller.addTween($(this), 
        TweenMax.from($(this),movetime,{
        css:{opacity:0, top: '+='+movewidth+'px'}}),
        movestart,
        false,
        false);
    });


});

 

 

 

category cloud