We Keep Coding

How to tramsform only once when scrolling?

I want to create the same animation when scrolling, like here but using pure no 3rd library JQuery: https://codepen.io/aPenHasNoName/pen/bGEoYym
Well, I have achieved that, however it scrolls like 4 times while I am going to the next section. Here is my code:
function scrollBanner() {
$(window).on('scroll', function () {
var scroll = $(window).scrollTop();
$('.intro-home-section').css({
transform: `rotateX(${(scroll)}deg)`
})
});
}
scrollBanner();
And I want it to be scrolled only once, while I go from $('.intro-home-section') to the next section. What is my problem?

How to scroll with jquery animate

I'm trying to make some buttons work here.
http://www.sepulturaimpex.ro/portofoliu is the website.
When i click left/right buttons i'd like to move from project to project exactly
The images are random width.
How can i achieve that?
Here is the script i'm using.
$(document).ready(function () {
$(".prev").click(function () {
$(".p_horizontal_wrap").animate({
scrollLeft: "-=700"
})
}), $(".next").click(function () {
$(".p_horizontal_wrap").animate({
scrollLeft: "+=700"
})
})
}),

The answer is in your question; if the images are random width, then you cannot scroll w/ a fixed width
I think your best bet is to look ahead and find the x position of the next object, then scroll to that. Depending on your markup, you may need to keep track of the object index you're scrolling into view.
Your next button (and your next/prev could be the same) would look like this:
$(".next").click(function() {
var targ = /** find out the next item to be shown **/
var left = $(targ).position().left;
$(".p_horizontal_wrap").animate({
scrollLeft: left
});
});

Highlighted menu items are highlighting too early in a parallax effect

I'm trying to build a website with a parallax effect and dynamically highlighted menu items.
For the moment everything works fine (parallax and menu items) but combined the menu items get a strange behaviour. They are highlighted too early, so the menu items swap from 'home' to 'company' on beginning of the 'home' site and so on.
This is the JS code I am using
$(document).ready(function() {
$('.parallax').scroll(function() {
var position = $(this).scrollTop();
$('.parallax__group').each(function() {
var target = $(this).offset().top;
var id = $(this).attr('id');
if (position >= target) {
$('a').removeClass('active');
$("a[href='#"+id+"']").addClass('active');
}
});
});
});
As I said... it's well working but the menu items are not highlighted when it reaches a new group, but way earlier. What could be the source of the problem? I can provide more code if needed.

Stick the bar always to footer even while animating

Recently here, I asked a question to stick a bar element always to bottom-left of the container. It seems not possible using just css. So, I ended up using javascript. Here is the Working Fiddle
Giving highlights of the previous question:
Stick the bar element to bottom-left of the container
The bar should be in bottom-left, even the container is scrolled vertically or horizontally.
The bar should come over the horizontal scrollbar, if the horizontal scrollbar is present.
The above fiddle works fine and obeys all above cases, even when the window is resized.
Now, I have the same situation but the container will get resized because of animation button click but not window resize.
Since, I am animating for one second, I am calling the same code present in the window resize function while I clicked on the animating button. But doing so is somehow breaking and isn't following the above rules/requirements.
Here is the Fiddle. (not working)
Please help.
PS: Here is the link to previous question. (if someone wants brief understanding)

Again, I solved it. I was making things complicated. Where there was need of only bottom property, I was using top and resetting it. Lots of unneccessary action in the code.
Here is the code, which is working fine.
$(function () {
$('.content').width($('body').width() - 50);
});
var stickToBottom = function (parent) {
var bar = parent.querySelector('.bar');
var top = bar.offsetTop;
parent.addEventListener('scroll', function (e) {
var el = e.currentTarget;
bar.style.bottom = -el.scrollTop + "px";
bar.style.left = el.scrollLeft + "px";
});
}
var parent = document.querySelector('.parent');
stickToBottom(parent);
$('.clickme').click(function () {
$(this).toggleClass('active');
});
Thanks to rlemon for giving a idea in javascript chat room.
Working Fiddle

Z-index on Polymer hero transition

I am trying to make a slideshow transition to full screen as shown here: http://alexfuhr.me/polymer-talk/ (the trigger for this is clicking the button at the top right)
The transition to a full screen works fine, but the transition back to the inline view causes the fullscreen slideshow to suddenly fall underneath the scaffolding. I have tried to change z-index to high numbers to rectify this, but nothing seems to work. Does anyone know how to fix this transition? The main code is here: https://github.com/afuhrtrumpet/afuhrtrumpet.github.io/blob/master/polymer-talk/index.html

Instead of mucking around with z-index to overlay elements on top of each other, the following approach might offer a better solution.
The idea is to hide the drawer of the core-drawer-panel (inside the core-scaffold) by setting the narrow attribute to true before the forward animation starts, and then restore the value before the back animation starts.
Also, this issue only happens when the drawer is visible on the screen. So we only need to subscribe to the core-animated-pages-transition-prepare event when the page is not in narrow mode.
Something like the following should work. Personally I prefer this 'cause it also animates the in/out of the drawer panel smoothly, indicating that the fullscreen-list takes up the full screen space.
<script>
var isBackAnimation = false;
var pages = document.querySelector("#mainPages");
var fab = document.querySelector("#fullscreen-button");
var switchPages = function () {
isBackAnimation = pages.selected == 0;
pages.selected = pages.selected == 0 ? 1 : 0;
fab.icon = pages.selected == 1 ? "unfold-less" : "unfold-more";
}
window.addEventListener('polymer-ready', function () {
// locate the core-drawer-panel inside the core-scaffold
var drawerPanel = document.querySelector('core-scaffold::shadow #drawerPanel');
// on loaded, listen to this event only when it's not in narrow mode
if (!drawerPanel.narrow) {
pages.addEventListener('core-animated-pages-transition-prepare', beforeAnimation);
}
drawerPanel.addEventListener('core-responsive-change', function (event) {
// in narrow mode, the animations work fine, so we remove the handlers
if (event.detail.narrow) {
pages.removeEventListener('core-animated-pages-transition-prepare', beforeAnimation);
}
// otherwise we add the handlers
else {
pages.addEventListener('core-animated-pages-transition-prepare', beforeAnimation);
// when the page was initially in narrow mode and then got resized up, we
// need to manually reset the narrow attribute at the end of the animation
if (isBackAnimation) {
pages.addEventListener('core-animated-pages-transition-end', afterAnimation);
}
}
});
function beforeAnimation() {
drawerPanel.narrow = !drawerPanel.narrow;
}
function afterAnimation() {
drawerPanel.narrow = !drawerPanel.narrow;
// this is a once off thing, so unsubscribe it here
pages.removeEventListener('core-animated-pages-transition-end', afterAnimation);
}
});
</script>