Develop Reference

pin element with scrollmagic related to div

I have created a simple animation with ScrollMagic: a wheel rotating while horizontally scrolling the page. The problem is that when scrolling the window page the animation appears smooth, while when scrolling just the div inside which the element is placed, the animations is quite "jerk".
I would like to hide the window scroll leaving just the div scroll, keeping the animation smooth.
Does anyone know why and how to solve this problem?
var controller = new ScrollMagic.Controller({
vertical: false
});
var tween = TweenMax.to("#weel", 1, {
rotation: 1080,
ease: Linear.easeNone
});
var scene = new ScrollMagic.Scene({
triggerElement: "#trigger",
duration: 5000
})
.setTween(tween)
.setPin("#weel", {
pushFollowers: false
})
.addIndicators() // add indicators (requires plugin)
.addTo(controller);
body {}
.weel img {
width: 100px;
}
#scrolldiv {
height: 500px;
width: 5000px;
background: url(bgterritorio.jpg);
position: relative;
}
.scrollcontainer {
overflow-x: scroll;
white-space: nowrap;
position: relative;
}
<div class="scrollcontainer">
<div id="scrolldiv" class="scrolldiv">
<div class="weel">
<img id="weel" src="weel.png" alt="">
</div>
</div>
<div id="trigger">
</div>
</div>

Solved!
It was necessary tell ScrollMagic which container the animation is referred to. In my case, I just add:
container: '.scrollcontainer'
to the controller object

full width carousel slider with previous next partial images

Im trying to create a slider that has the main image about 60% of the screen and then 20% of the previous and next image next to it. Here is an example http://www.qantumthemes.xyz/onair2/wpdemo/
Im trying to use slick slider and the example here https://kenwheeler.github.io/slick/ under Slider Syncing where it has the option centerMode. The problem is that I can't seem to find a way to set the width of the previous and next images.
Here is the code I have so far with slick slider
.slider {
width: 50%;
margin: 100px auto;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
<section class="center slider">
<div>
<img src="1.jpg">
</div>
<div>
<img src="2.jpg">
</div>
<div>
<img src="3.jpg">
</div>
<div>
<img src="4.jpg">
</div>
</section>

I created this fiddle, which works they way you're asking https://jsfiddle.net/uqy8L69g/.
Main fix was to initialize variableWidth to true and set width for the slides:
.slick-slide {
width: 2em;
}
.slick-active {
width: 5.5em;
border: .1em solid black;
}
The problem is the weird move it does while changing slides. This happens because of centerMode. It implements padding only after the sliding was done. To fix that, I would play with transitions using onAfterChange (you can read about it here: https://github.com/kenwheeler/slick/issues/1005).

jQuery full screen section slide left, slide right

I am playing with jquery recently and right now - trying to get animations to work.
Whole idea is basically a fullscreen slider. We have few sections with position absolute and height 100% of the document - in jquery we're playing with z-index. It's quite simply, but I can't figure out how to make a proper slide left and right animations. It's always breaking.
$(document).ready(function() {
var windowWidth = $(window).width();
var slideCount = $('.slide').length;
$('button#next').on('click', function() {
var slideActive = $('.slide.active');
var nextSlide = slideActive.next('.slide');
nextSlide.addClass('active').animate({
'z-index' : '2',
'left' : windowWidth
},500);
slideActive.removeClass('active');
});
});;
body, html {
height: 100%;
position: relative;
}
body {
font-size: 14px;
color: #fff;
}
nav {
position: absolute;
top: 2rem;
right: 2rem;
z-index: 99;
}
section {
height: 100%;
display: flex;
align-items: center;
position: absolute;
right: 0;
left: 0;
}
section#home {
background-color: #2c3e50;
}
section#aboutMe {
background-color: #e74c3c;
}
section#smthElse {
background-color: #1abc9c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
<button id="prev">Back</button>
<button id="next">Next</button>
</nav>
<section id="home" class="slide active">
<div class="container">
<p>1</p>
</div>
</section>
<section id="aboutMe" class="slide">
<div class="container">
<p>2</p>
</div>
</section>
<section id="smthElse" class="slide">
<div class="container">
<p>3</p>
</div>
</section>
Before that I tried just by adding class with css defined in .css and animating it (jquery ui) but effect was more or less the same.
All I want to achive is a simple slide functions of my sections.
Example behaviour: http://codepen.io/jibbon/pen/BoisC
Also, I am not looking for ready solutions as I need as simple code as possible to learn and develop it in my way.
Thank you guys!

There are many things that you can improve in your code to achieve what you want.
First, active class is set to a slide but isn't applied any special CSS rule, as you set position: absolute to your divs, you must set z-index to overlap one above other, initializing your app.
Here there is a idea, how to implement what you want:
https://jsfiddle.net/nz2hL6vn/1/

jQuery Plugin Slick Carousel image alignment

this is my first question on stackoverflow.
Im currently working with Slick carousel jQuery Plugin and it works so far as I want it to work. There is only one issue left, I want different sized Images be centered horizontal and vertical, depending on their ratio. I think an image makes clear what I mean.
image
Thanks in advance!
edit: its not only about center divs vertically but also make maximum height and width of all tiles the same and also still keep responsivity.
$(".regular").slick({
dots: true,
infinite: false,
slidesToShow: 7,
slidesToScroll: 6,
responsive: [{
breakpoint: 1200,
settings: {
slidesToShow: 5,
slidesToScroll: 4
}
}, {
breakpoint: 992,
settings: {
arrows: false,
slidesToShow: 3,
slidesToScroll: 2
}
}, {
breakpoint: 768,
settings: {
arrows: false,
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
html,
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.slider {
margin: 50px;
}
.slick-slide {
margin: 0px 10px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: blue;
}
#media screen and (max-width: 768px) {
.slick-dots {
position: initial !important;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<section class="regular slider">
<div>
<img src="http://placehold.it/150x300?text=1">
<p>text</p>
</div>
<div>
<img src="http://placehold.it/550x300?text=2">
<p>text</p>
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
<p>text</p>
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
<p>text</p>
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
<div>
<img src="http://placehold.it/350x300?text=7">
</div>
<div>
<img src="http://placehold.it/350x300?text=8">
</div>
<div>
<img src="http://placehold.it/350x300?text=9">
</div>
<div>
<img src="http://placehold.it/350x300?text=10">
</div>
<div>
<img src="http://placehold.it/350x300?text=11">
</div>
<div>
<img src="http://placehold.it/350x300?text=12">
</div>
</section>

Check this:
https://jsfiddle.net/7pa8jq4a/5/
I used to center:
display: flex;
align-items: center;
justify-content: center;
I added wrapper div to slide and to img style max-height and max-width;

I tweaked you version a little bit (in case you do not want flex-box):
https://jsfiddle.net/fr74h8k5/2/
.slick-slide .image {
height: 200px;
width: 100%;
margin: 0 auto;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}

Here is what you need:
1) at first, set section { text-align:center;}
2) set slick-track div to :
.slick-track{
display: flex;
align-items: center;
}
3) and for example
.slick-slide img {
..........
max-width: 150px;
max-height: 150px;
}
thats all (source: How to vertically center divs? )

I think what Im looking for is a JS or jQuery script that compares two tiles and if they have same size its set as default size and then all the other tiles use this size either as maximum width if their ratio is wider than the default ratio or as maximum height if their ratio is taller than the default ratio. This is only an idea, I dont know if its best solution or even is possible. Is this understandable? Its a pitty my JS and jQuery skills arent good enough to try something on my own.

How to use owl carousel vertically?

I did not want to take the plugin code so I was wondering if someone had already managed to use plugin vertically. It's a shame on the part of this plugin can be used horizontally.
Sorry for langage...

You could rotate the carousel and then rotate the items back, like this:
$(document).ready(function() {
$(".owl-carousel").owlCarousel({
items: 3,
loop: false,
mouseDrag: false,
touchDrag: false,
pullDrag: false,
rewind: true,
autoplay: true,
margin: 0,
nav: true
});
});
#import "https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css";
.owl-carousel {
transform: rotate(90deg);
width: 270px;
margin-top: 100px;
}
.item {
transform: rotate(-90deg);
}
.owl-carousel .owl-nav {
display: flex;
justify-content: space-between;
position: absolute;
width: 100%;
top: calc(50% - 33px);
}
div.owl-carousel .owl-nav .owl-prev,
div.owl-carousel .owl-nav .owl-next {
font-size: 36px;
top: unset;
bottom: 15px;
}
<div class="owl-carousel owl-theme">
<img class="item" src="https://via.placeholder.com/320x240?text=Slide%200">
<img class="item" src="https://via.placeholder.com/320x240?text=Slide%201">
<img class="item" src="https://via.placeholder.com/320x240?text=Slide%202">
<img class="item" src="https://via.placeholder.com/320x240?text=Slide%203">
<img class="item" src="https://via.placeholder.com/320x240?text=Slide%204">
<img class="item" src="https://via.placeholder.com/320x240?text=Slide%205">
<img class="item" src="https://via.placeholder.com/320x240?text=Slide%206">
<img class="item" src="https://via.placeholder.com/320x240?text=Slide%207">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
Check this a codepen : https://codepen.io/marcogu00/pen/eLeWMq
Notice that drag must be disabled as it wont work properly

Here is a CodePen that solves this:
http://codepen.io/dapinitial/pen/xZaRqz
$(".owl-carousel").owlCarousel({
loop: true,
autoplay: true,
items: 1,
nav: true,
autoplayHoverPause: true,
animateOut: 'slideOutUp',
animateIn: 'slideInUp'
});

Regard to the 2.0 beta it's currently not possible to slide vertically. However, the complexity has been significantly reduced by the refactoring and the plugin architecture to make room for more features. This includes in particular an API with which the various animation effects can be broken down into separate animation providers. Thus, a vertical slide would certainly be possible. However, the feature is ambitious and there are some problems to solve. Here is the current roadmap.

.item {
transform: rotate(-90deg);
}
.owl-carousel{
transform: rotate(90deg);
}

Works only with square images or square elements
Follows example with mouse enabled https://codepen.io/luis7lobo9b/pen/zYrEqKj
<!-- HTML -->
<div class="wrapper">
<div class="owl-carousel owl-carousel-vertical">
<div class="item">
<img src="<!--https://via.placeholder.com/300.png/000/fff-->">
</div>
<div class="item">
<img src="<!--https://via.placeholder.com/300.png/333/fff-->">
</div>
<div class="item">
<img src="<!--https://via.placeholder.com/300.png/666/fff-->">
</div>
</div>
</div>
/* CSS */
.wrapper{
height: 300px;
width: 300px;
}
.owl-carousel-vertical{
transform: rotate3d(0, 0, 1, 90deg);
}
.owl-carousel-vertical .item{
transform: rotate3d(0, 0, 1, -90deg);
}
// JS
$(function(){
$('.owl-carousel').owlCarousel({
items: 1,
loop: false,
nav: false,
margin: 0
});
// this code below enables drag and drop vertically. Unfortunately I was unable to disable horizontal drag and drop so it will remain active, but we already have something now =D
$('.owl-carousel').data('owl.carousel').difference = function(first, second) {
return {
x: first.x - second.x + (first.y - second.y),
y: first.y - second.y
};
};
});