I am currently building a script where the background image moves depending on the location of the mouse. I basically got this effect to work but the problem is that as soon if another div is overlaying it is not working anymore.
In the example (scroll down in snippet) you can see the difference between the two. Maybe somebody knows a solution for this where the background is still triggered on the mouse position but isn't affected because a div is overlaying?
I can add pointer-events:none to the overlaying div which works but looking for a better solution.
$(document).ready(function() {
var movementStrength = 50;
var height = movementStrength / $(window).height();
var width = movementStrength / $(window).width();
$(".hover-image").mousemove(function(e) {
var pageX = e.pageX - ($(window).width() / 2);
var pageY = e.pageY - ($(window).height() / 2);
var newvalueX = width * pageX * -1 - 25;
var newvalueY = height * pageY * -1 - 50;
$('.hover-image').css("background-position", newvalueX + "px " + newvalueY + "px");
});
});
* {
margin: 0;
padding: 0;
}
.spacer {
position: relative;
width: 100%;
height: 50vh;
background: black;
}
.bg {
position: relative;
width: 100%;
min-height: 100vh;
}
.hover-image {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: url('https://source.unsplash.com/random') -25px -50px;
background-size: calc(100% + 50px);
z-index: 0;
}
.container {
position: relative;
}
.col-md-12 {
padding: 300px 0;
}
.col-md-12 span {
padding: 10px;
background: black;
color: white;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="spacer"></section>
<section class="bg">
<div class="hover-image"></div>
</section>
<section class="spacer"></section>
<section class="bg">
<div class="hover-image"></div>
<div class="container">
<div class="">
<div class="col-md-12 text-center">
<span>
BACKGROUND NOT WORKING ANYMORE
</span>
</div>
</div>
</div>
</section>
<section class="spacer"></section>
Related
I am building my portfolio website and I thought of using the hero section image into the next section of about us by moving and resizing the image, as a guess I have fixed about the height of 700px up to which image has to scroll. But the problem is that it is not working on resizing screen size. Is there a way to move it such that it always fits in about section on scrolling? Below is code snippets and gif showing the problem.
<!--HTMl-->
<section class="hero" id="hero">
<div id="hero-img" class="hero-img" ><img src="main.png"></div>
</section>
/*CSS*/
.hero .hero-img{
margin-left: auto;
position: absolute;
right: 0;
opacity: 1;
bottom: 0;
max-height: auto;
max-width: 100%;
}
.hero .hero-img img{
max-height: 100%;
max-width: 100%;
min-width: 160px;
min-height: 320px;
}
//JavaScript//
$(window).bind('scroll',function(e){
parallaxScroll();
});
function parallaxScroll(){
var scr = $(window).scrollTop();
var scrolled =document.getElementsByName('hero-img').length - $(window).scrollTop();
if(scr<690){
$('.hero-img').css('top',(0-(scrolled*1.1))+'px');
$('.hero-img').css('right',(0-(scrolled*.3))+'px');
}
else
{
$('.hero-img').css('top',('top'-(scrolled*1.1))+'px');
$('.hero-img').css('right',('right'-(scrolled*.3))+'px');
}
}
Problem with resizing
What does the code do:
Takes the position of the element with ID id ="skills" and subtracts from this value the height of the DIV element in which the picture is and sets this value as the maximum for scrolling.
You had set the 690 manually. The change is that now this IF listening automatically which will come first the id ="skills" or 690
I hope I've been helpful
$(window).bind('scroll', function (e) {
parallaxScroll();
});
function parallaxScroll() {
var scr = $(window).scrollTop();
var nel = $("#skills").offset().top - $("#hero-img").height();
var scrolled = $('#hero-img').length - $(window).scrollTop();
if (scr < nel && scr < 690) {
$('.hero-img').css('top', (0 - (scrolled * 1.1)) + 'px');
$('.hero-img').css('right', (0 - (scrolled * .3)) + 'px');
}
else {
$('.hero-img').css('top', ('top' - (scrolled * 1.1)) + 'px');
$('.hero-img').css('right', ('right' - (scrolled * .3)) + 'px');
}
}
.hero .hero-img {
margin-left: auto;
position: absolute;
right: 0;
opacity: 1;
/* bottom: 0; */
top: 0px;
max-height: auto;
max-width: 100%;
}
.hero .hero-img img {
max-height: 100%;
max-width: 100%;
min-width: 160px;
min-height: 320px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<section class="hero" id="hero">
<div id="hero-img" class="hero-img">
<img src="main.png">
</div>
</section>
<div>
ABOUT
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="skills">
SKILLS
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
I am trying to make a sticky banner witn html and css and js. My html is this
window.addEventListener('scroll', function(ev) {
var distanceToTop = container.getBoundingClientRect().top;
if (container.getBoundingClientRect().top >= document.documentElement.scrollTop - screen.height + 400) {
sticky.style.top = "100px"
} else {
sticky.style.top = document.documentElement.scrollTop - screen.height + 400 + "px";
}
});
.container {
background: red;
width: 600px;
height: 100px;
position: relative;
}
.sticky {
background: blue;
width: 200px;
height: 200px;
position: absolute;
right: 0;
top: 100px;
}
<div class="container">
<div class="sticky"></div>
</div>
I would want when i scroll the window the stocky div to be center on y axis and when the distance between container and top of the page is less then 200px the two divs to be attached.
Can anyone to give me a clue?
I have a panel on the left side of my screen that flips out when activated. As you move your mouse around, it slightly alters the rotateY transform for a nice interactive effect. I want to mirror this on the right side of the screen, but every adjustment I make just causes the panel to freak out when you move the mouse.
What adjustments need to be made to the second jquery function to mirror the effect? I tried a lot of things including the current code which is replacing x = x + 15 with x = 360 - (x + 15). It's close, but still not right.
$(document).on('mousemove','#viewport1 .menu',function( event ) {
var x = Math.round(event.pageX / $(this).width() * 10);
x = x + 15;
$(this).css('transform','rotateY(' + x + 'deg)');
});
$(document).on('mousemove','#viewport2 .menu',function( event ) {
var x = Math.round(event.pageX / $(this).width() * 10);
x = 360 - (x + 15); //this is almost but not quite right...
$(this).css('transform','rotateY(' + x + 'deg)');
});
.viewport {
perspective: 1000px;
position: absolute;
top: 0; bottom:0; width: 30%;
padding: 5px;
}
.menu {
text-align: center;
width: 100%;
border: 1px solid black;
display: inline-block;
height: 100%;
}
#viewport1 {
left: 0;
}
#viewport1 .menu {
perspective-origin: left;
transform-origin: left;
transform: rotateY(15deg);
}
#viewport2 {
text-align: right;
right: 0;
}
#viewport2 .menu {
perspective-origin: right;
transform-origin: right;
transform: rotateY(345deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="viewport1" class="viewport">
<div class="menu">HOVER ME!</div>
</div>
<div id="viewport2" class="viewport">
<div class="menu">HOVER ME!</div>
</div>
You are using event.pageX, which is the position of the mouse pointer, relative to the left edge of the document, to calculate the rotation of the <div>. You need to substract the left offset: $(this).offset().left. After that you change x+15 to x-15 and you get the mirrored effect.
$(document).on('mousemove','#viewport1 .menu',function( event ) {
var x = Math.round(event.pageX / $(this).width() * 10);
x = x + 15;
$(this).css('transform','rotateY(' + x + 'deg)');
});
$(document).on('mousemove','#viewport2 .menu',function( event ) {
var x = Math.round((event.pageX - $(this).offset().left) / $(this).width() * 10);
x = x - 15;
$(this).css('transform','rotateY(' + x + 'deg)');
});
.viewport {
perspective: 1000px;
position: absolute;
top: 0; bottom:0; width: 30%;
padding: 5px;
}
.menu {
width: 100%;
border: 1px solid black;
display: inline-block;
height: 100%;
}
#viewport1 {
left: 0;
}
#viewport1 .menu {
perspective-origin: left;
transform-origin: left;
transform: rotateY(15deg);
}
#viewport2 {
text-align: right;
right: 0;
}
#viewport2 .menu {
perspective-origin: right;
transform-origin: right;
transform: rotateY(345deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="viewport1" class="viewport">
<div class="menu"></div>
</div>
<div id="viewport2" class="viewport">
<div class="menu"></div>
</div>
How can I get the position of the cursor in percentage? I tried this so far.
$(".outter").click(function(e) {
var perc = e.offsetX / $(this).width() * 100;
if (perc > 100)
perc = 100;
$(this).children(".progress").css("width", perc + "%");
});
$(".outter").dblclick(function(e) {
$(this).children(".progress").css("width", "100%");
});
.outter {
display: inline-block;
width: 33.33%;
box-sizing: border-box;
border: 2px solid black;
padding: 10px;
position: relative;
}
.outter > .content {
position: relative;
z-index: 2;
}
.outter > .progress {
position: absolute;
top: 0;
left: 0;
background-color: #29B6AC;
height: 100%;
width: 50%;
z-index: 1;
transition: all .3s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outter">
<div class="content">
Some content...
</div>
<div class="progress"></div>
</div>
My problem is, that the value inside perc isn't correct. In the middle at about 50% it seems like ok. But if you click at about 10% od 90% you can see the backgroundbar won't stop at your cursor position. What did I wrong?
The .outter div has a padding of 10px, and since you are using jquery's .width() which will not include those 20 pixels.
You can either can get rid of the padding or you can use .outerWidth() to get the correct size.
Your padding css on the outter class messed up the offsetX module, try setting the padding to 0px and everything will work as intended... read on the offsetX API/doc
The calculation should be something like:
$(".outter").click(function(e) {
var parentOffset = $(this).parent().offset();
var relX = e.pageX - parentOffset.left;
var perc = relX / $(this).width() * 100;
...
I am still very new to Jquery. I want to see how I can have one element scroll to a specific location in DOM and pause for a few scroll rotations.
here is a codepen I have been playing with - http://codepen.io/mslfire/pen/dYovBZ
Any pointers where to go from here?
here is codepen code
html
<div class="mine">
<img class="scroll-to-item" src="http://placehold.it/350x150">
</div>
<div class="mine2">
<div id="test" class="box-outline">pause scroll</div>
</div>
<div class="mine2">
<div id="test" class="box-outline">pause scroll</div>
</div>
<div class="mine2">
<div id="test" class="box-outline">pause scroll</div>
</div>
<div class="mine2"></div>
Here is css
.scroll-to-item {
margin: 0 auto;
position: fixed; // edit
top: 30%;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
}
.mine {
height: 500px;
background: grey;
}
.mine2 {
height: 500px;
background: lightblue;
}
.box-outline {
margin: 0 auto;
position: relative;
top: 30%;
left: 0;
bottom: 0;
right: 0;
width: 350px;
height: 150px;
border: 5px solid red;
color: red;
text-align: center;
line-height: 150px;
}
Here is BASIC what I am Seeking to do / JS
$(document).ready(function() {
var pause = $('body').css({'overflow': 'hidden'});
var resume = $('body').css({'overflow': 'scroll'});
var x = 1200; // where x is the position to scroll to and then'pause'at
var x2 = x + 1200; // where x2 is the next position to scroll to and then'pause'at
var scrollRollTimes = 2 + scrollEvent; // where scrollRollTimes is # of times a user scrolls/moves - would be better if could be like a animation in time mil seconds 0.2s ex
var scrollEvent = $(window).scroll(); // capture event
var scrollPosition = [
self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
]; //record the place of scroll / dom or does it?
$(scrollPosition !== x).scroll(function(){
$(pause).scroll(scrollRollTimes.resume);
});
$(scrollPosition !== x2).scroll(function(){
$(pause).scroll(scrollRollTimes.resume);
});
});
When .scroll-to-item is at x place from start - pause scroll. Pause for 'scrollRollTimes' user scrolls - resume scroll.