I have an image that is supposed to parallax. However when I scroll the image moves down. I have tried to search up how to fix this but all of them have failed to work. I am also not very familiar with JavaScript or jQuery.
This is the code:
HTML
<body>
<div class="header-image">
<div class="header-text">
<h1 style="font-size:50px">Title</h1>
</div>
</div>
</html>
CSS
html, body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
.header-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images.png");
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.header-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
JS (with jQuery)
// Y axis scroll speed
var velocity = 0.5;
function update(){
var pos = $(window).scrollTop();
$('.header-image').each(function() {
var $element = $(this);
// subtract some from the height b/c of the padding
var height = $element.height()-0;
$(this).css('background-position', '50%' + Math.round((height - pos) * velocity) + 'px');
});
};
$(window).bind('scroll', update);
update();
Related
I am making a hover effect on the image. I set the image to grayscale by default and when it hovered over, a circle follows the cursor and shows the colored part. Basically, there are two images. grayscale one is shown by default and on hover inside the circle, the colored part is shown.
Everything is working good except when I try to size the image using background-size the circle part doesn't follow. As the background property sets the circle part image according to its size. See the code:
I set the background-size of video card to 100% to fill up its parent container but when I do it for the circle, the image is sized inside the circle.
$('.video-card').mousemove(function(e) {
var offs = $(this).offset(),
p = {
x: offs.left,
y: offs.top
},
mPos = {
x: e.pageX,
y: e.pageY
},
x = mPos.x - p.x - 75,
y = mPos.y - p.y - 75;
$('.gray', this).css({
left: x,
top: y,
backgroundPosition: -x + 'px ' + -y + 'px'
});
});
.video-card {
position: relative;
width: 100%;
height: 950px;
overflow: hidden;
background-size: 100% !important;
}
.video-card-overlay {
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
background: gray;
filter: grayscale(100%);
background-size: 100% !important;
}
.gray {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
display: none;
border-radius: 50%;
}
.video-card:hover>.gray {
display: block;
}
.video-gallery-section .container {
max-width: 100%;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video-card" style="background: url('assets/img/home/1.png') no-repeat">
<div class="video-card-overlay" style="background: url('assets/img/home/1.png') no-repeat"></div>
<div class="gray" style="background: url('assets/img/home/1.png') no-repeat"></div>
</div>
How about using clip-path instead of trying to achieve the same effect through positioning?
const $overlay = $('.video-card-overlay');
$('.video-card').mousemove(function (e) {
$overlay.css({
clipPath: `circle(150px at ${e.offsetX}px ${e.offsetY}px)`
})
});
.video-card {
height: 950px;
position: relative;
width: 100%;
}
.gray,
.video-card-overlay {
background-image: url('assets/img/home/1.png');
background-position: center center;
background-size: cover;
inset: 0;
position: absolute;
}
.gray {
filter: grayscale(100%);
}
.video-card:not(:hover) .video-card-overlay {
display: none;
}
<div class="video-card">
<div class="gray"></div>
<div class="video-card-overlay"></div>
</div>
See how much shorter the code became!
I am working with this parallaxish 3d effect i found in a codepen. However I need to add an additional wrapper around all the html. When i wrap the html contents in a <div> everything disappears. When I wrap it in a <span> tag everything is fine. Also if i set that <span> tag to display:block; everything disappears again.
Why is this happening when wrapped in a block element?
Thanks!
https://codepen.io/anon/pen/JapeJX
When you add display: block make sure u set its height to 100% as its inner elements have height set in %.
Checkout https://stackoverflow.com/a/5658062/7333443
CodePen: https://codepen.io/anon/pen/QVQJPR
!(function ($doc, $win) {
var screenWidth = $win.screen.width / 2,
screenHeight = $win.screen.height / 2,
$elems = $doc.getElementsByClassName("elem"),
validPropertyPrefix = "",
otherProperty = "perspective(1000px)",
elemStyle = $elems[0].style;
if (typeof elemStyle.webkitTransform == "string") {
validPropertyPrefix = "webkitTransform";
} else if (typeof elemStyle.MozTransform == "string") {
validPropertyPrefix = "MozTransform";
}
$doc.addEventListener("mousemove", function (e) {
var centroX = e.clientX - screenWidth,
centroY = screenHeight - (e.clientY + 13),
degX = centroX * 0.02,
degY = centroY * 0.01,
$elem;
for (var i = 0; i < $elems.length; i++) {
$elem = $elems[i];
$elem.style[validPropertyPrefix] =
otherProperty + "rotateY(" + degX + "deg) rotateX(" + degY + "deg)";
}
});
})(document, window);
/* CREDITS TO DESKTOPOGRAPHY FOR IMAGE USED */
html,
body {
width: 100%;
height: 100%;
}
body {
background: #004382;
overflow: hidden;
}
.wrapper {
transform-style: preserve-3d;
margin: 0 auto;
max-width: 982px;
width: 100%;
height: 100%;
position: relative;
display: flex;
justify-content: center;
align-self: center;
background: url("http://portalpacific.net/img/desk/icon-circles.png")
no-repeat center center;
background-size: contain;
}
.bloc {
height: 100%;
width: 100%;
position: relative;
display: flex;
justify-content: center;
align-self: center;
background-size: contain;
background-position: center;
}
.content {
transform: translateZ(80px) scale(1);
-webkit-transform: translateZ(80px) scale(1);
height: 100%;
width: 100%;
max-width: 720px;
position: absolute;
margin: auto;
color: #fff;
z-index: 3;
}
.content1 {
background: url("http://portalpacific.net/img/desk/Website.png") no-repeat;
background-position: center;
max-width: 982px;
width: 100%;
height: 100%;
position: relative;
display: flex;
justify-content: center;
align-self: center;
background-size: contain;
}
.content p:nth-of-type(1) {
font-size: 36px;
line-height: 60px;
position: absolute;
}
.content p:nth-of-type(2) {
position: absolute;
}
.block {
display: block;
height: 100%;
}
<span class="block">
<div class="wrapper elem" style="transform: perspective(700px) rotateY(0deg) rotateX(0deg);">
<div class="bloc">
<div class="content content1"></div>
<div class="content content2">
</div>
</div>
</div>
</span>
I have parallax background that's moving at a certain speed with javascript. I need to put the text inside those background divs, so each background has its own text block. But when I put the text inside it goes to the top of the page, despite the container it's located. Something in the positions needs to change but I'm not sure what exactly. Any ideas?
HTML
<div id='hero'>
<div class='layer-bg layer' data-depth='0.10' data-type='parallax'>
<img class="logo" />
</div>
<div class='layer-1 layer' data-depth='0.20' data-type='parallax'>
</div>
<div class="relative">
<div class='layer-2 layer' data-depth='0.30' data-type='parallax'>
<div class="video">
Text
</div>
</div>
</div>
<div class='layer-3 layer' data-depth='0.40' data-type='parallax'></div>
</div>
<div id='hero-mobile'></div>
CSS
body {
padding: 0;
margin: 0;
background-color: $bronze;
font-family: 'Playfair Display', serif;
color: $white;
}
//
#hero {
height: $heroHeight;
overflow: hidden;
position: relative;
}
#content {
background-color: $bronze;
}
.layer {
background-position: bottom center;
background-size: auto;
background-repeat: no-repeat;
width: 100%;
height: $heroHeight;
position: fixed;
z-index: -1;
}
.first-section {
padding: 50px 0 20px 0;
}
.text-header {
font-size: 50px;
text-align: center;
}
h1 {
line-height: 120%;
margin-bottom: 30px;
}
p {
color: #ede0d5;
font-size: 18px;
line-height: 150%;
}
// #hero, .layer {
// min-height: 800px;
// }
.layer-bg {
background-image: url('');
height: 4000px!important;
background-position: top center;
width: 100%;
}
.layer-1 {
background-image: url('
');
height: 3000px;
}
.layer-2 {
background-image: url('');
height: 5500px;
}
.layer-3 {
background-image: url('
');
height: 8000px;
}
.layer-4 {
background-image: url('
');
background-position: center bottom;
}
.layer-overlay {
background-image: url('
');
}
.relative {
position: relative;
}
.logo {
margin: 0px auto;
max-width: 600px;
margin-top: 100px;
display: block;
}
JS
(function() {
window.addEventListener('scroll', function(event) {
var depth, i, layer, layers, len, movement, topDistance, translate3d;
topDistance = this.pageYOffset;
layers = document.querySelectorAll("[data-type='parallax']");
for (i = 0, len = layers.length; i < len; i++) {if (window.CP.shouldStopExecution(1)){break;}
layer = layers[i];
depth = layer.getAttribute('data-depth');
movement = -(topDistance * depth);
translate3d = 'translate3d(0, ' + movement + 'px, 0)';
layer.style['-webkit-transform'] = translate3d;
layer.style['-moz-transform'] = translate3d;
layer.style['-ms-transform'] = translate3d;
layer.style['-o-transform'] = translate3d;
layer.style.transform = translate3d;
}
window.CP.exitedLoop(1);
});
}).call(this);
I don't why you are using 8000px height in your CSS but
check the link may be it will be helpful for you
https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm
Its because you fixed the position of every .layer class div that's why they all are in same position of your DOM.
And overflow: hidden; of your main div #hero
Solution
You have to remove fixed position of your .layer class and overflow: hidden;.
Example:- see fiddle
I have tried to make rotating rays but when it rotate you can see the rays is not on full screen it has empty area from the right and left
you can see the result and code from here: JSFiddle
<style>
#me {
-webkit-animation: rotation 5s infinite linear;
}
#-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
}
.win-boxx-container{
z-index:1111111111111111111;
position: fixed;
width:100%;
height:100%;
background-size:100%;
left:0;
top:0;
background: rgba(0, 0, 0, 0.75);
}
.win-lights-bg {
width: 100%;
height: 100%;
left: 0%;
top: 0%;
left: -59%;
top: -57%;
position: absolute;
z-index:11111111111111111112;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 810px -926px;
}
.win-boxx-box{
position:absolute;
margin:auto;
background:url('images/win-boxx.png');
background-size:100%;
background-repeat: no-repeat;
width: 572px;
height: 337px;
text-align:center;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index:1111111111111111111123;
}
.centering{
text-align:center;
}
body{
position:fixed;
}
#media all and (max-width: 1000px) and (min-width: 520px) {
.win-boxx-box{
width: 352px;
height: 227px;
}
.win-boxx-stars{
width: 50%;
}
}
#media all and (max-width: 550px) and (min-width: 220px) {
.win-boxx-box{
width: 352px;
height: 227px;
}
.win-boxx-stars{
width: 50%;
}
}
.win-lights-bg{
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
z-index: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 810px -926px;
}
</style>
<div class="win-boxx-container" >
<img id="me" src="http://store1.up-00.com/2015-01/1421959145661.png" class="win-lights-bg" />
</div>
You have a lot of overlapping, unnecessary CSS in your code.
What I did here is create a fucntion that determines the size your spinner should be based on the current window size and sets it up in vanilla js (javascript).
JSFIDDLE DEMO
Script:
function setUpSpinner() {
//get height and width and the spinning element and assign them to variables
var height = window.innerHeight;
var width = window.innerWidth;
var winlightsbg = document.getElementsByClassName('win-lights-bg')[0];
determine the largest and the adjustment factor (I used 1.5 to accomodate the corners when rotating - you may be able to finesse this a bit)
var largest;
if (height > width) {
largest = height;
} else {
largest = width;
}
var adjust = largest * 1.5;
//set up new height, width and offsets
winlightsbg.style.height = adjust + "px";
winlightsbg.style.width = adjust + "px";
winlightsbg.style.left = -((adjust - largest) / 2) + "px";
winlightsbg.style.top = -((adjust - largest) / 2) + "px";
}
//on page load run our spinner set up function once then bind it to the window resize event
window.onload = function() {
setUpSpinner();
window.addEventListener('resize', setUpSpinner, false);
};
CSS:
.win-lights-bg {
width: 100%;
height: 100%;
position: absolute;
z-index:100;
}
I need help with setting a diagonal line in css to fit into many resolutions via mobile.
Theres a div with 100% width and a diagonal line that supposed to stay in its place inside that div but every time I change the resolution of the window the line moves up or down.
There must be something I can do.
Heres an example:
.wrapper
{
width: 100%;
position: relative;
border: 1px solid red;
overflow: hidden;
padding-bottom: 12px;
}
.upper-triangle
{
-moz-transform: rotate(-3.5deg);
-o-transform: rotate(-3.5deg);
-webkit-transform: rotate(-3.5deg);
-ms-transform: rotate(-3.5deg);
transform: rotate(-3.5deg);
border-color: black;
border-style: solid;
border-width:2px;
position: relative;
top: -21px;
zoom: 1;
width: calc(100% - -2px);
right: 1px;
}
.arrow-wrapper
{
position: absolute;
top: 41px;
left: 22px;
z-index: 1;
}
.arrow-wrapper::before
{
border-style: solid;
border-width: 16px 0px 0px 20px;
border-color: transparent transparent transparent black;
position: absolute;
content: "";
}
.arrow-wrapper::after
{
position: absolute;
content: "";
width: 0;
height: 0;
margin-top: 8px;
margin-left: 4px;
border-style: solid;
border-width: 16px 0 0 20px;
border-color: transparent transparent transparent white;
}
HTML:
<div class="wrapper">
<div class="headline">
<img class="image" width="36" height="36"/>
</div>
http://jsfiddle.net/MkEJ9/417/
You need to set the anchor point from where to apply the rotation. Your transform is changing the position, because it by default pivots from the center, which in this case is not what you want.
Use in your css:
.upper-triangle {
...
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
...
}
Check this updated fiddle:
http://jsfiddle.net/MkEJ9/420/
Note: in your fiddle I had to change the top to 10px.
Maybe something like this works? fiddle
<script>
$(document).ready(function(){
var viewportHeight = $(window).height();
var viewportWidth = $(window).width();
var width = viewportWidth;
var height = viewportHeight*0.6;
var imgSize = "100%" + ' ' + "100%";
$('.div').css("width", width);
$('.div').css("height", height);
$('.div').css("background-size", imgSize);
});
$(window).resize(function(){
var viewportHeight = $(window).height();
var viewportWidth = $(window).width();
var width = viewportWidth;
var height = viewportHeight*0.6;
var imgSize = width + ' ' + height;
$('.div').css("width", width);
$('.div').css("height", height);
$('.div').css("background-size", imgSize);
});
</script>
<style>
.div { background-image: url('http://indesignsecrets.com/wp-content/uploads/2010/07/step_1.jpg'); background-position: left top; background-repeat: no-repeat; background-color: yellow; }
</style>
<div class="div"></div>
Better to use SVG, which gives nice responsive diagonal lines, works on almost all browsers.
.box {
width: 20rem;
height: 10rem;
background-color: hsla(0, 0%, 70%, 0.3);
cursor: pointer;
position: relative;
}
.svg-stroke {
position: absolute;
width: 100%;
height: 100%;
}
<div class="box">
<svg class='svg-stroke' viewBox='0 0 10 10' preserveAspectRatio='none'>
<line x1='0' y1='0' x2='10' y2='10' stroke='red' stroke-width='.6' stroke-opacity='0.2' />
<line x1='10' y1='0' x2='0' y2='10' stroke='red' stroke-width='.6' stroke-opacity='0.2' />
</svg>
</div>