I'm using gsap and scrolltrigger and what I'm trying to accomplish is to make the images stack over each other when i scroll
Is this possible and how ?
I've accomplished the image sequence and am now able to scroll to show new images, however i want next image to slide up and then just stack over the first image. And continue doing so.
Has anyone done this before or know how i might go on?
https://codepen.io/kevmorales/pen/OJwEgpV
gsap.set('.frame', {xPercent:-50, yPercent:-50})
var wrapImgHeight = document.getElementById('wrap').clientHeight;
var action = gsap.timeline({
scrollTrigger: {
trigger: ".sec02",
scrub: 1,
pin: true,
start: "top top",
end:"+=2000",
}
})
var action = gsap.timeline({
scrollTrigger: {
trigger: ".sec01",
scrub: 1,
pin: true,
start: "top top",
end:"+=2000",
}
})
.to('#wrap', {y:-wrapImgHeight*4, duration:2, ease:'none'},0.5 )
.to({},{duration:0.5})
Related
The rotate function in map map is bugged (alt ctrl + click) and I can't figure out why :
It seems like the roration point is wrong, and it kind of zoom in/ zoom out on mouse move. Also, the map does update when it move
Here is a preview of what is does :
STEP 1 : unrotated map
STEP 2 : rotate map with alt ctrl
As uyou can see, the center of the picture 1 is not the center of the picture 2 anymore. Plus, you can easily see it has dezoomed.
I can' understand why it does this, I have many OL stuff on my map : selection, bitmaplayer, overlay but here is the main code for map
mounted () {
this.ol = this.createMap()
this.isReady = true
this.redraw()
if (this.isSelectionEnable) {
this.enableSelection(
this.ol,
this.selectInteraction,
this.selectedIconStyle,
this.vectorSource
)
this.enableOverlayOnSelection()
}
},
// later, in methods
createMap () {
return new Map({
target: 'map',
layers: [],
view: this.createView(),
controls: [],
pixelRatio: 1,
interactions: defaults({ doubleClickZoom: false })
})
},
createOSMLayer (title = 'OSM', zIndex = 100) {
return new TileLayer({
title,
zIndex,
source: new OSMSource()
})
},
createView () {
return new View({
center:
transform(
[this.longitude, this.latitude],
'EPSG:4326',
'EPSG:3857'
),
zoom: 20
})
},
I tried to comment piece of code but it doesnt change anything.
transform(
[this.longitude, this.latitude],
'EPSG:4326',
'EPSG:3857'
),
I suspect the transform or ESPG 4326 to ESPG 3857 to cause this but I dont understand ho how to fix.
If you guys have any suggestions...!
EDIT : seems like the canvas rotate but in a wierd way ..
You've seen this on other sliders, where along with the nav arrows you'd have some label/title indicating the contents of the next/previous slide.
Hopefully someone has already done this, so I can copy and adapt the code. Failing that I guess I'll experiment with different events listeners, pulling the text from sibling slides, and changing the content of active slide's nav divs.
Though maybe it's better to save the label text as data attributes? I don't know. Just brainstorming the approach here...
I figured it out. Instead of tracking the active slide, I'm adding labels when the swiper is initialised. Sharing it here, in case anyone here has a similar question.
let homeSwiper = new Swiper('.home-swiper', {
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
init: function () {
addLabels();
},
},
});
Each slide has a hidden span that I use as its label. I then just pull those labels from the surrounding slides:
function addLabels() {
let homeSlides = document.querySelectorAll('.home-slider .swiper-slide');
homeSlides.forEach((slide, i) => {
let labelPrev, labelNext;
if (i === 0) {
labelPrev = homeSlides[homeSlides.length - 1].querySelector('span.label').textContent;
labelNext = homeSlides[i + 1].querySelector('span.label').textContent;
} else if (i === homeSlides.length - 1) {
labelPrev = homeSlides[i - 1].querySelector('span.label').textContent;
labelNext = homeSlides[0].querySelector('span.label').textContent;
} else {
labelPrev = homeSlides[i - 1].querySelector('span.label').textContent;
labelNext = homeSlides[i + 1].querySelector('span.label').textContent;
}
slide.querySelector('.slide-nav-label--prev').textContent = labelPrev;
slide.querySelector('.slide-nav-label--next').textContent = labelNext;
})
}
I noticed when using Owl Carousel 2, while slide the item in mobile viewing, the browser also can be move up and down. Try to disabling the scroll function when trigger the Owl Carousel 2 prev and next function in mobile but it still doesn't work.
$('.owl-carousel').owlCarousel({
loop:true,
margin:5,
nav:true,
items:2,
});
// $('.owl-carousel').bind("mousewheel", function() {return false;});
$('.owl-carousel').bind('touchmove', function(e){e.stopPropagation(); alert('allow scroll');});
Appreciated the answer from expert out here.
Thank you.
I made this work with the help of OwlCarousel2 events.
There are 2 events we can use together for this purpose:
drag.owl.carousel fires when user start to drag
dragged.owl.carousel fires when dragging finished
And this make it work like how we want it:
var owl = $('.owl-carousel');
owl.owlCarousel({
// your options
});
owl.on('drag.owl.carousel', function(event) {
$('body').css('overflow', 'hidden');
});
owl.on('dragged.owl.carousel', function(event) {
$('body').css('overflow', 'auto');
});
So; it use css overflow to disable scrolling when dragging started and enables it back when it finished.
This works on iOS & VueJS.
var owl = $('.owl-carousel');
owl.owlCarousel({
// your options
})
// disable scroll
owl.on('drag.owl.carousel', function(event) {
document.ontouchmove = function (e) {
e.preventDefault()
}
})
// enable scroll
owl.on('dragged.owl.carousel', function(event) {
document.ontouchmove = function (e) {
return true
}
})
look for the below piece of code in custom.js file of your project
Owl.Defaults = {
items: 3,
loop: false,
center: false,
rewind: false,
mouseDrag: true,
touchDrag: true,}
change the things to below:-
touchDrag:false,
and owl-carousel will simply stop scrolling horizontally both on mobile and desktop drag!
For owlcarousel2, you can use mouseDrag option.
$('.owl-carousel').owlCarousel({
mouseDrag:false
});
Reference https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
in owl.js
mouseDrag: false,
touchDrag: false,
pullDrag: false,
freeDrag: false,
I would like to build a image gallery (in a lightbox (Overlay)) with Indices displaying the index of the current shown image. Like:
I will rarely have more than 5 pictures, I need "swipe" gestures to display the next/prev ones AND arrows.
First I thought the sap.ui.commons.Carousel would be perfect, but as I did not find any events (like e.g. "transitionEnd") I do not know how to access the current index then. The paginator has no swipe event (?)..
I would appreciate any advice which approach you would follow! Just for the first steps, then I'd be happy to post my code here. Right now I need a little help to start with the best fitting solution of controls.
Thanks a lot.
Why not use sap.m.Carousel? It has pageChanged event with oldActivePageId and newActivePageId params.
Here is a sample:
var appCarousel = new sap.m.App("myApp", {initialPage:"carouselPage"});
var carouselPage = new sap.m.Page("carouselPage",
{title: "Carousel",
enableScrolling: false }
);
var page1 = new sap.m.Page("page1",
{title: "Carousel Test Page 1",
enableScrolling: false }
);
var page2 = new sap.m.Page("page2",
{title: "Carousel Test Page 2",
enableScrolling: false }
);
var carousel = new sap.m.Carousel("myCarousel", {
activePage: page1,
loop: true,
pages: [page1, page2]
});
//Listen to 'pageChanged' events
carousel.attachPageChanged(function(oControlEvent) {
console.log(1);
console.log( "sap.m.Carousel: page changed: old: " + oControlEvent.getParameters().oldActivePageId );
console.log(" new: " + oControlEvent.getParameters().newActivePageId );
});
carouselPage.addContent(carousel);
appCarousel.addPage(carouselPage);
appCarousel.placeAt("content");
sap.ui.getCore().applyChanges();
jsbin: http://jsbin.com/tuqohoqinu/2/edit?html,css,js,console,output
You can see changing of pages in the output window. Hope that helps. Thanks.
How do I trigger on the overlays in jqplot only after I click a checkbox (not when the html loads). When I first set overlay option show to false the overlays are not displayed on plot at 1st and when I used my trigger function the overlays do not appear.
Here is the code I use for the plot :
<div id="fastest" style="margin-top:20px; margin-left:20px; margin-right:200px; width:800px; height:400px;">
<script class="code" type="text/javascript">
$(document).ready(function(){
var dataset="too long to be displayed here"
plot1 = $.jqplot('fastest', dataset, {
title: 'Test_figs',
legend: {show:false},
series: [{
showMarker: false,
color: '#ED0E0E',
label: 'R spectrum',
neighborThreshold: -1
}],
axes:{
xaxis:{
label:'Restframe Wavelength'
},
yaxis:{
label:'Flux',
tickOptions:{formatString:'%.3e'}
}
},
cursor:{
show:true,
zoom:true,
tooltipLocation:'sw'
},
Canvasoverlay: {
show: false,
objects: [
{verticalLine: {
name: 'Na-ID',
x: 5893.000000,
lineWidth: 2,
color: '#F0630C',
lineCap:'butt',
yOffset:0,
shadow: true
}}
]
}
});
});
function NaID_trigger() {
var co = plot1.plugins.canvasOverlay;
var line = co.get('Na-ID');
if (line.options.show==false) line.options.show = true;
else line.options.show = false;
co.draw(plot1);
}
</script>
I then use :
<button onclick="NaID_trigger()">Na-ID</button>
to trigger the overlay on or off for instance.
PS: I tried replacing draw by replot as advised didn't work when show=false in overlays options.
I finally found the solution myself :
to not display the overlays when the jqplot loads I set the overall overlays "show" option to true.
Then within each object I set show to false.
Instead of the external to the plot function I used before I switched to an even handler of the form:
$("input[type=checkbox][name=Na-ID]").change(function(){
plot1.plugins.canvasOverlay.get('Na-ID').options.show = this.checked;
plot1.replot();
});
Now the plot display the selected overlay when checkbox is ticked and not at the beginning.
Hope this will help someone who has the same issues.