[WordPress] どのようにこれをレプリケートする方法行くのですか?

スポンサーリンク

Question

私は数日前、私はしようとしてどのように動作を複製ページを見たが、私は確かにこのことについて移動する方法では正確です。問題のページ: http://reebokcrossfitlibertyvillage.com/get-started/ 基本的には、3 つの手順でページを持ってしたいし、1 の手順のいずれかをクリックするときは、新しい新しい背景画像をテキストのブロックを持ちだすでしょう。どのように私は行くだろうこれについて正確には、これはちょうど、javascript のアニメーションや何ですか?

答え

ここでは小さなデモ: http://codepen.io/pixelass/pen/zxNLeN/

HTML

Slide 1
Slide 2
Slide 3

Hello I am a text

Hello I am a text

Hello I am a text

CSS

.slider {
  height: 300px;
  width: 300px;
  position: relative;
  overflow: hidden;
}
.slider .triggers {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}
.slider .triggers .trigger {
  border: 2px solid;
  -webkit-flex: 1 1 2px;
      -ms-flex: 1 1 2px;
          flex: 1 1 2px;
}
.slider .slides {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 900px;
  height: 250px;
  position: relative;
  top: 0;
  left: 0;
  -webkit-transition: -webkit-transform 1s linear;
          transition: transform 1s linear;
}
.slider .slide {
  -webkit-flex: 1 1 2px;
      -ms-flex: 1 1 2px;
          flex: 1 1 2px;
  position: relative;
}
.slider .slide img {
  width: 100%;
  height: 100%;
}
.slider .slide p {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 100px;
  height: 100px;
  padding: 20px;
  background: red;
  color: #fff;
  -webkit-transition: -webkit-transform 0.5s 1s;
          transition: transform 0.5s 1s;
  -webkit-transform: translatex(300px);
      -ms-transform: translatex(300px);
          transform: translatex(300px);
}
.slider .slide.active p {
  -webkit-transition: -webkit-transform 1s 0.5s;
          transition: transform 1s 0.5s;
  -webkit-transform: translatex(0);
      -ms-transform: translatex(0);
          transform: translatex(0);
}

JS

jQuery('.trigger').on('click', function(e){
  console.log(e);
  var $slides = jQuery(this).parent().next('.slides');
  var i = jQuery(this).index();
  var translate = 'translateX('+ (i * -300) +'px)';
  console.log(translate);
  $slides.css({
    transform: translate
  });
  $slides.find('.slide').removeClass('active');
  $slides.find('.slide:nth-child('+(i+1)+')').addClass('active');
});

答え

スライダーの青少年のクラスにバインド CSS3 効果

たとえば: http://jsfiddle.net/Tymek/ca50vkr4/

.my-caption {
    (...)
    transition: all 1s ease;
    opacity: 0;
}

.c2 {
    transform: translate(100px,0px);;
}
.c3 {
    transform: rotate3d(10,10,10,90deg);
}

.active > .my-caption {
    transform: rotate3d(0,0,0,0deg) translate(0,0);
    opacity: 1;
}

お好みのスライダーのしくみを理解するかどうかは JavaScript を記述する必要はありません

http://stackoverflow.com/questions/27881277/how-would-i-go-about-replicating-this

スポンサーリンク

Leave a Reply