I am trying to change the background image of a page when a uses mouse wheel scroll/scrolldown. Something like this page here.
I have three different background images that I wish to change (i.e. increment when the user scrolls down/decrement when the user scrolls up).
See jsfiddle here (which isn't really working as hoped).
Please also see code below.
I hope it is clear what I am trying to achieve. If not please let me know and I can provide further information.
CSS
.bgImage {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
z-index: 1;
}
body, html, #scene, .bgImage {
height: 100%;
}
.home{
background: url("http://cdn3-www.wrestlezone.com/assets/uploads/gallery/ric-flair/gettyimages-93353438.jpg") center center no-repeat;
background-size: cover;
}
.brett {
background: url("http://2.bp.blogspot.com/-69o3lsK5MrQ/ThhlOTxGQlI/AAAAAAAAEfY/e0AJF-6sKBw/s1600/bret_hart_-_bret_hart_74.jpg") center center no-repeat;
background-size: cover;
}
.hulk{
background: url("https://tse3.mm.bing.net/th?id=OIP.M44755b5d2bade01af176621c77ebe279o2&pid=15.1&P=0&w=300&h=300") center center no-repeat;
background-size: cover;
}
HTML
<div class="bgImage"></div>
JS
var pages = ['home','brett','hulk'];
var page = 0;
$(document).ready(function(){
$('.bgImage').on('mousewheel', function (e) {
if (e.deltaY>0) {
page += 1;
if(page >= pages.length){
return;
}else{
jQuery('.bgImage').addClass(pages[page]);
}
} else {
page -= 1;
jQuery('.bgImage').removeClass(pages[page]);
}
e.preventDefault();
});
});
Right off the bat I can tell you that you'll probably need a more robust scrolling framework in order to emulate the site you linked. Try checking out scrollmagic.io for ideas on how to execute this. One way to look at it is you are essentially capturing scrolling and applying them to a "timeline" of events, if you will.
To get your example working, check out this fiddle:
https://jsfiddle.net/1nrL5gv1/20/
One important thing I added was the removal of all of the existing classes before you apply a new one. This way, only the most recent image will show up and you won't have to worry about css specificity/order.
function cleanUpBg() {
for(i = 0; i < pages.length; i++) {
bgEl.removeClass(pages[i]);
}
}
I also added a timeout so you can actually trigger one image change at a time. Again, I highly recommend checking out existing scroll libraries, as they will allow you get into a project like this much more quickly.
Related
I searched a lot but couldn't find the answer I want. I have a JS script which shows an image when a fixed element is hovered. However I would like to always have the image at the center of the screen, not matter where the user scrolls. How can I reach that?
My JS function:
$(document).ready(function($) {
$('.trigger').mouseover(function() {
// find our span
var elem = $(this).siblings('span');
// get our img url
var src = elem.attr('data-original');
// change span to img using the value from data-original
elem.replaceWith('<img src="' + src + '"width="400" style="display:block;position:absolute;top: 0; left: 0; bottom: 0; right: 0;margin: auto;"/>');
});
$('.trigger').mouseout(function() {
// find our span
var elem = $(this).siblings('img');
// get our img url
var src = elem.attr('src');
// change img to span using the value from data-original
elem.replaceWith('<span data-original="'+src+'"></span>');
});
});
JSFiddle: https://jsfiddle.net/rbmd6a39/
I can get offset from the top of page using
window.pageYOffset;
But I don't know where to put that value to have it in the center.
You could give that image styles that would make it fixed in the center of your screen. No need for JS there.
Now also works on very large images with max-width, max-height and object-fit: contain!
.always-centered {
display: block;
position: fixed;
top: 50%;
left: 50%;
max-width: 100%;
max-height: 100%;
-o-object-fit: contain;
object-fit: contain;
transform: translate(-50%, -50%);
z-index: 99;
}
You don't actually need to use JavaScript for centering it. You could use position: fixed and center using left: 50%; transform: translateX(-50%);in CSS, which would be less demanding of the client computer.
Using JS, though, it'd be pretty much the same thing: the image would need to be fixedly positioned and you'd define left as half of the viewport minus half of your image width.
I suggest using CSS and classes if possible, since this is less convoluted and all calculations will be dealt be the browser itself.
I am trying to create a page that has before and after images that use a slider based on mouse movement to show both images. I need to have multiple sliders on the page and can not seem to get them to work. Below are a couple of different examples I have found and the challenges I am having.
http://codepen.io/dudleystorey/pen/JDphy - This works well with mobile but I can not seem to add a second version without adding css for every image since the background image is embedded in the css.
div#inked-painted {
position: relative; font-size: 0;
-ms-touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
div#inked-painted img {
width: 100%; height: auto;
}
div#colored {
background-image: url(https://s3-us-west2.amazonaws.com/s.cdpn.io/4273/colored-panel.jpg);
position: absolute;
top: 0; left: 0; height: 100%;
width: 50%;
background-size: cover;
}
http://codepen.io/ace/pen/BqEer - Here is the other example that does not work as well with mobile. I can add the second image but the slider works all the images simultaneously and not individually when a second image is added.
Can anyone help with adding the second image. I am sure both of these are very workable but I am missing something in my css/javascript knowledge that is not allowing multiple images.
You need to loop though all classes to be able set the eventhandlers individual. Your codepen example could be change to this to work with individual images at once:
var blackWhiteElements= document.getElementsByClassName("black_white");
for (i = 0; i < blackWhiteElements.length; i++) {
initCode($(blackWhiteElements[i]));
}
function initCode($black_white) {
var img_width = $black_white.find('img').width();
var init_split = Math.round(img_width/2);
$black_white.width(init_split);
$black_white.parent('.before_after_slider').mousemove(function(e){
var offX = (e.offsetX || e.clientX - $black_white.offset().left);
$black_white.width(offX);
});
$black_white.parent('.before_after_slider').mouseleave(function(e){
$black_white.stop().animate({
width: init_split
},1000)
});
}
codepen here: http://codepen.io/anon/pen/mJPmKV
Your first attempt is near sufficient.
Assign the background-image inline in the html to avoid extra classes
<div id="colored" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/colored-panel.jpg);"></div>
change background-size on #colored to background-size: auto 100%; to reduce the "shaky" effect
background-size: auto 100%;
I created a div in html and assigned a background image to it, and i want to make an onclick event to that photo and don't know how, that's the div :
.add_btn {
background-color: #099;
position: absolute;
height: 35px;
width: 200px;
background-image: url(img/add.png);
background-repeat: no-repeat;
background-position: center center;
top: 265px;
You didn't give any information about your DOM except that you have an element with that class. It's hard to give a good answer but I'll try.
The following code will attach a function to the onclick events of all the elements with the add_btn class.
document.getElementsByClassName("add_btn").onclick =
function () {
alert("Hello");
};
Background image click is not possible. Because you have a foreground layer.
But you can use this JQuery for foreground image click...
$('.className > .Inner_Classname2= > img').click(function(e) {
alert("Ok");
});
The little popup window appears in the middle of the original page.
The original page is covered by grey shade if not by the popup window.
The underneath original page can still be scrolled up and down.
Follow these steps:
1) Create this CSS rule:
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0.5;
background: #666;
filter: alpha(opacity=50); /* opacity for IE browsers */
}
2) Add this code to your jQuery:
$("body").prepend("<div class='overlay'></div>");
3) When done, remove it like this:
$(".overlay").remove();
Didn't test this, but it should work (maybe with very minor modifications). This is one way, if you prefer doing it by yourself. You can, however, use existing solutions such as Twitter's Bootstrap lib which is cool, and I recommend it.
http://twitter.github.com/bootstrap/
Regards.
You could use the JQueryUI dialog widget http://jqueryui.com/dialog/#modal
This is easy enough to achieve with some simple CSS...
The overlay (the grey background) is fixed in place and covers everything below:
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0;
filter: alpha(opacity=0);
z-index: 2; // above content
}
The "dialog" itself is similar in style, but smaller:
#dialog {
display: none;
position: fixed;
width: 500px;
height: 250px;
background-color: #fff;
z-index: 3; // above 'overlay'
}
The top and left attributes can be calculated with simple JavaScript, so that the dialog can be positioned in the center of the browser:
positionDialog = function() {
if (typeof window.innerHeight != 'undefined') {
dialog.top = parseInt(window.innerHeight / 2) - dialog.height;
dialog.left = parseInt(window.innerWidth / 2) - dialog.height;
}
}
And also upon window resize:
$(window).resize(function() {
positionDialog();
}
Notice how the CSS sets these DIVs to display: none. They are hidden until called, which is done by setting them to display: block.
These days, I find that it's much simpler and more robust to rely on jQuery UI's excellent dialog widget.
It's called a light box. There's a way that you can do it using only CSS:
http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/
The key for darkening the background is the CSS opacity property of a box that you cover the background with, which you can set a black background and use this CSS for transparency:
-moz-opacity: 0.8;
opacity:.80;
You could take a look at the modal included in Twitter Bootstrap: http://twitter.github.com/bootstrap/javascript.html#modals
When a user clicks a link which has an image as a background, I need an onClick event that changes the background position of it. This is the link:
Favorite
It's already set in css and there are two states, regular and hover, with hover being shifted by 12px.
a.favorite {
width: 15px;
height: 12px;
background: url(img/icon-fav.png) no-repeat;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
text-indent: -300px;
}
a.favorite:hover {
background-position: 0 -12px
}
When I click the image once, I need the background position to be set the same as the hover state.
I'm doing that like this, and it works:
document.getElementById("favorite_1").style.backgroundPosition = "0 -12px";
But when the link is clicked again, I need it to switch back to the normal background position and I can't get that to work. This is the function I'm trying but it only works for moving the background to "0 -12px", not for moving it back to its original position.
function favoriteBusiness(id){
if(document.getElementById("favorite_1").style.backgroundPosition == "0 -12px")
document.getElementById("favorite_1").style.backgroundPosition = "";
else
document.getElementById("favorite_1").style.backgroundPosition = "0 -12px";
}
Can someone point me in the right direction here?
Unless you're making calculations, you're better off adding and removing classes that contain the new position. This is usually what's done for manipulating CSS sprites.