summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorDavid DeSandro <desandrocodes@gmail.com>2016-06-20 11:04:32 -0400
committerDavid DeSandro <desandrocodes@gmail.com>2016-06-20 14:32:03 -0400
commitc73351ec2983f483e8e22bc6e1ac4331736f03dd (patch)
tree3fb57c089c2c02162eecacbee2af63522cc41309
parente3a86cc74737edd89b73242ee7c8fbb830bea9ae (diff)
downloadflickity-c73351ec2983f483e8e22bc6e1ac4331736f03dd.zip
flickity-c73351ec2983f483e8e22bc6e1ac4331736f03dd.tar.gz
flickity-c73351ec2983f483e8e22bc6e1ac4331736f03dd.tar.bz2
🔔 add scroll event
scroll event, parallax sandbox
Diffstat
-rw-r--r--js/animate.js8
-rw-r--r--js/flickity.js4
-rw-r--r--sandbox/group-cells.html (renamed from sandbox/slides.html)10
-rw-r--r--sandbox/scroll-event.html224
4 files changed, 242 insertions, 4 deletions
diff --git a/js/animate.js b/js/animate.js
index defcceb..1bd8a76 100644
--- a/js/animate.js
+++ b/js/animate.js
@@ -97,7 +97,6 @@ proto.positionSlider = function() {
}
x = x + this.cursorPosition;
-
// reverse if right-to-left and using transform
x = this.options.rightToLeft && transformProperty ? -x : x;
@@ -111,6 +110,13 @@ proto.positionSlider = function() {
} else {
this.slider.style[ this.originSide ] = value;
}
+ // scroll event
+ var firstSlide = this.slides[0];
+ if ( firstSlide ) {
+ var positionX = -this.x - firstSlide.target;
+ var progress = positionX / this.slidesWidth;
+ this.emitEvent( 'scroll', [ progress, positionX ] );
+ }
};
proto.positionSliderAtSelected = function() {
diff --git a/js/flickity.js b/js/flickity.js
index 51d7245..c962b93 100644
--- a/js/flickity.js
+++ b/js/flickity.js
@@ -274,8 +274,10 @@ proto._positionCells = function( index ) {
this.slideableWidth = cellX;
// slides
this.updateSlides();
- // contain cell target
+ // contain slides target
this._containSlides();
+ // update slidesWidth
+ this.slidesWidth = this.getLastSlide().target - this.slides[0].target;
};
/**
diff --git a/sandbox/slides.html b/sandbox/group-cells.html
index baf9b36..8be70e2 100644
--- a/sandbox/slides.html
+++ b/sandbox/group-cells.html
@@ -4,7 +4,7 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
- <title>slides</title>
+ <title>group cells</title>
<link rel="stylesheet" href="../css/flickity.css" />
@@ -45,12 +45,14 @@ html { overflow-y: scroll; }
.carousel__cell--width2 { width: 49%; }
.carousel__cell--width3 { width: 74.5%; }
}
+
+
</style>
</head>
<body>
- <h1>slides</h1>
+ <h1>group cells</h1>
<div class="carousel carousel1">
<div class="carousel__cell carousel__cell--width2">0</div>
@@ -66,6 +68,8 @@ html { overflow-y: scroll; }
<div class="carousel__cell">10</div>
</div>
+
+
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
@@ -91,6 +95,8 @@ var flkty = new Flickity( '.carousel1', {
wrapAround: true,
// cellAlign: 'right'
});
+
+
</script>
</body>
diff --git a/sandbox/scroll-event.html b/sandbox/scroll-event.html
new file mode 100644
index 0000000..4077774
--- /dev/null
+++ b/sandbox/scroll-event.html
@@ -0,0 +1,224 @@
+<!doctype html>
+<html>
+<head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width" />
+
+ <title>scroll event</title>
+
+ <link rel="stylesheet" href="../css/flickity.css" />
+
+<style>
+* { box-sizing: border-box; }
+
+html { overflow-y: scroll; }
+
+.carousel {
+ border: 1px solid;
+ margin-bottom: 40px;
+/* width: 1000px;*/
+}
+
+.carousel__cell {
+/* width: 25%;*/
+ width: 32%;
+ height: 200px;
+ background: #BDF;
+ margin-left: 1%;
+ margin-right: 1%;
+ font-size: 40px;
+}
+
+/*.carousel__cell--width2 { width: 40%; }
+.carousel__cell--width3 { width: 80%; }*/
+
+.carousel__cell--width2 { width: 66%; }
+.carousel__cell--width3 { width: 100%; }
+
+.carousel__cell.is-selected {
+ background: #68F;
+}
+
+.progress-bar {
+ height: 10px;
+ width: 0;
+ background: #333;
+}
+
+@media (min-width: 1000px) {
+ /* fit four */
+ .carousel__cell { width: 23.5%; }
+ .carousel__cell--width2 { width: 49%; }
+ .carousel__cell--width3 { width: 74.5%; }
+}
+
+
+
+/* ---- parallax ---- */
+
+.parallax {
+ margin-top: 100px;
+ position: relative;
+ overflow-x: hidden;
+ padding-bottom: 40px;
+}
+
+.parallax__carousel__cell {
+ background: hsla(0, 100%, 50%, 0.4);
+ height: 220px;
+ width: 50%;
+ margin: 40px 5%;
+}
+
+.parallax__layer {
+ position: absolute;
+ left: 0;
+ top: 0;
+}
+
+.parallax__layer--bg {
+ top: 70px;
+ width: 80%;
+ height: 160px;
+}
+
+.parallax__layer--fg {
+ pointer-events: none;
+ width: 125%;
+ height: 300px;
+}
+
+.parallax__layer__cell {
+ position: absolute;
+ width: 50%;
+ margin: 0 5%;
+ height: 100%;
+}
+
+.parallax__layer__cell:nth-child(1) { left: 0%; }
+.parallax__layer__cell:nth-child(2) { left: 60%; }
+.parallax__layer__cell:nth-child(3) { left: 120%; }
+.parallax__layer__cell:nth-child(4) { left: 180%; }
+.parallax__layer__cell:nth-child(5) { left: 240%; }
+
+.parallax__layer__cell--bg {
+ background: hsla(210, 100%, 50%, 0.4);
+}
+
+.parallax__layer__cell--fg {
+ background: hsla(60, 100%, 50%, 0.4);
+}
+
+</style>
+
+</head>
+<body>
+
+ <h1>scroll event</h1>
+
+<div class="carousel carousel1">
+ <div class="carousel__cell carousel__cell--width2">0</div>
+ <div class="carousel__cell">1</div>
+ <div class="carousel__cell">2</div>
+ <div class="carousel__cell carousel__cell--width2">3</div>
+ <div class="carousel__cell carousel__cell--width2">4</div>
+ <div class="carousel__cell">5</div>
+ <div class="carousel__cell">6</div>
+ <div class="carousel__cell">7</div>
+ <div class="carousel__cell carousel__cell--width3">8</div>
+ <div class="carousel__cell">9</div>
+ <div class="carousel__cell">10</div>
+</div>
+
+<div class="progress-bar"></div>
+
+<div class="parallax">
+
+ <div class="parallax__layer parallax__layer--bg">
+ <div class="parallax__layer__cell parallax__layer__cell--bg"></div>
+ <div class="parallax__layer__cell parallax__layer__cell--bg"></div>
+ <div class="parallax__layer__cell parallax__layer__cell--bg"></div>
+ <div class="parallax__layer__cell parallax__layer__cell--bg"></div>
+ <div class="parallax__layer__cell parallax__layer__cell--bg"></div>
+ </div>
+
+ <div class="parallax__carousel">
+ <div class="parallax__carousel__cell"></div>
+ <div class="parallax__carousel__cell"></div>
+ <div class="parallax__carousel__cell"></div>
+ <div class="parallax__carousel__cell"></div>
+ <div class="parallax__carousel__cell"></div>
+ </div>
+
+ <div class="parallax__layer parallax__layer--fg">
+ <div class="parallax__layer__cell parallax__layer__cell--fg"></div>
+ <div class="parallax__layer__cell parallax__layer__cell--fg"></div>
+ <div class="parallax__layer__cell parallax__layer__cell--fg"></div>
+ <div class="parallax__layer__cell parallax__layer__cell--fg"></div>
+ <div class="parallax__layer__cell parallax__layer__cell--fg"></div>
+ </div>
+
+
+</div>
+
+<script src="../bower_components/get-size/get-size.js"></script>
+<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
+<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
+<script src="../bower_components/unipointer/unipointer.js"></script>
+<script src="../bower_components/unidragger/unidragger.js"></script>
+<script src="../bower_components/tap-listener/tap-listener.js"></script>
+<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
+
+<script src="../js/cell.js"></script>
+<script src="../js/slide.js"></script>
+<script src="../js/animate.js"></script>
+<script src="../js/flickity.js"></script>
+<script src="../js/drag.js"></script>
+<script src="../js/prev-next-button.js"></script>
+<script src="../js/page-dots.js"></script>
+<script src="../js/player.js"></script>
+<script src="../js/add-remove-cell.js"></script>
+<script src="../js/lazyload.js"></script>
+
+<script>
+var flkty = new Flickity( '.carousel1', {
+ initialIndex: 2,
+ // groupCells: true,
+ // wrapAround: true,
+ // cellAlign: 'right'
+});
+
+var progressBar = document.querySelector('.progress-bar');
+
+flkty.on( 'scroll', function( progress ) {
+ console.log( progress );
+ var width = Math.max( 0, Math.min( 1, progress ) );
+ progressBar.style.width = width * 100 + '%';
+});
+
+flkty.reposition();
+
+// ----- ----- //
+
+var paraBG = document.querySelector('.parallax__layer--bg');
+var paraFG = document.querySelector('.parallax__layer--fg');
+
+var paraFlkty = new Flickity( '.parallax__carousel', {
+
+});
+
+var cellRatio = 0.6;
+var bgRatio = 0.8;
+var fgRatio = 1.25;
+
+paraFlkty.on( 'scroll', function( progress ) {
+ // console.log( progress );
+ paraBG.style.left = ( 0.5 - ( 0.5 + progress * 4 ) * cellRatio * bgRatio ) * 100 + '%';
+ paraFG.style.left = ( 0.5 - ( 0.5 + progress * 4 ) * cellRatio * fgRatio ) * 100 + '%';
+});
+
+paraFlkty.reposition();
+</script>
+
+</body>
+</html>
generated by cgit v1.1 at 2025-05-10 17:31:58 +0000