I wanted to make the background to slide towards left while using parallax effect. but I am having a problem that the speed of animation is changing as i change size of the browser window. i want the animation to be smooth and linear and not changing with browser size.
PS- the code is not running here properly but if you copy the code in html file seperately on your computer, it works. It doesnt even work on jsfiddle.
EDIT-> if i change to {background position: 1366px (actual width of wallpaper) } in my #keyframes animatedBack , it works fine. So problem is with the percentage.
body {
margin: 0;
}
#keyframes animatedBack {
from {background-position: 0 0;}
to {background-position: 100% 0;}
}
.section {
width: 100%;
height: 80%;
position: relative;
background-attachment: fixed;
background-repeat: repeat-x;
animation-name: animatedBack;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.content {
position: absolute;
background-color: white;
height: 100%;
width: 100%;
}
#s1 {
background-image: url(http://hdwplan.com/wp-content/uploads/2015/12/digital-background-desktop.jpeg);
}
#s2 {
background-image: url(http://www.planwallpaper.com/static/images/Background_HD_images9.jpg);
}
#s3 {
background-image: url(http://www.freelargeimages.com/wp-content/uploads/2015/04/Free_Background_Wallpaper_09.jpg);
}
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<div class="section" id="s1">
</div>
<div>
<div class="section">
<div class="content"><h1 style="text-align:center;">2</h1></div>
</div>
<div>
<div class="section" id="s3">
</div>
</body>
</html>
Use javascript for animation or any kind of effect. this is a sample code, Add some content inside div with id my-content and scroll .
<body>
<div class="layer1"></div>
<div class="layer2"></div>
<div id='my-content'></div> //your content for scrolling
</body>
<style>
body{
margin:0px;
background:url(bg.jpg) fixed;
}
#my-content{ position:absolute; }
.layer1{
position:fixed;
background: url(bg1.png) no-repeat 0px 200px;
width:100%;
height:800px;
}
.layer2{
position:fixed;
background: url(bg1.png) no-repeat 600px 400px;
width:100%;
height:1000px;
}
</style>
<script>
function my-parallax(){
var layer1 = document.getElementById('layer1');
var layer2 = document.getElementById('layer2');
layer1.style.top = -(window.pageYOffset / 4)+'px';
layer2.style.top = -(window.pageYOffset / 8)+'px';
}
window.addEventListener("scroll", my-parallax, false);
</script>
Related
<html>
<head>
<style>
#contain_main {background-color:black;
width:100%;
height:auto;}
#main {width:100%;
height:700px;
background-image:url("https://www.sappun.co.kr/shopimages/sappun/0090040002602.jpg?1581389206");
background-repeat:no-repeat;
background-position:center center;
background-color:#dbdbdb;}
</style>
</head>
<body>
<div id="contain_main">
<div id="main">
</div>
</div>
</body>
</html>
how can i make the black #contain_main box is place over the #main div box?
i used z-index, position and display, but not work..how can i fix this?
any help will so appreciated! :)
One method is to make a sibling div to the image which is just the black background with lowered opacity (div#overlay). Add position relative to the parent. That way, you can add position absolute to the children, make them top and left 0 aligned to the parent, and give the black background a higher z-index than the image so that it overlays on top.
<html>
<head>
<style>
#contain_main {width:100%;
height:700px;
position: relative;}
#overlay {position: absolute;
top: 0;
left: 0;
background-color: #000;
opacity: 0.5;
width: 100%;
height: 100%;
z-index: 1;}
#image {position: absolute;
top: 0;
left: 0;
width:100%;
height:100%;
background-image:url("https://www.sappun.co.kr/shopimages/sappun/0090040002602.jpg?1581389206");
background-repeat:no-repeat;
background-position:center center;
}
</style>
</head>
<body>
<div id="contain_main">
<div id="overlay"></div>
<div id="image"></div>
</div>
</body>
</html>
You can stack child within by using z-index:-1;.
fiddle to playaround.
Use relative to parent.
Use absolute and z-index:-1; to child.
For demo purpose I have just used a padding:10px; to show that there is indeed child div is under parent, so you can take that out.
#contain_main {
background-color: black;
width: 50%;
height: 700px;
position: relative;
padding: 10px;
}
#main {
width: 100%;
height: 700px;
background-image: url("https://www.sappun.co.kr/shopimages/sappun/0090040002602.jpg?1581389206");
background-repeat: no-repeat;
background-position: center center;
background-color: gray;
position: absolute;
z-index: -1;
}
<html>
<head>
</head>
<body>
<div id="contain_main">
<div id="main">
</div>
</div>
</body>
</html>
A simple way to go about adding overlays is to use multiple backgrounds with one of them being a gradient (the overlay color with an alpha value) and the other one being the background-image:
#main {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(https://www.sappun.co.kr/shopimages/sappun/0090040002602.jpg?1581389206);
}
I am having trouble making my image fullscreen. if i make a css: .background {background: url....} it works fine but then noting else works. So I made it as and image but the image isnt bigger in height than my screen so i have to scroll. Can anyone help me with this and maybe help to find other mistakes?
Thanks <3
(i see you cant see the picture were I am talking about but maybe you now the solution without seeing it :D)
body {
height: 100%;
margin: 0;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header {
background-color: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=80);
-moz-opacity: 0.80;
-khtml-opacity: 0.8;
opacity: 0.8;
color: white;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 150px;
padding: 0;
margin: 0;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 102px;
}
.logo {
Width: 150px;
height: auto;
filter: brightness(0) invert(1);
float: left;
}
#foto {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 1024px;
}
<!DOCTYPE html>
<html>
<head>
<title> Duco's Blog </title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<header>
<div class="header" id="myHeader">
<img class="logo" src="leeuw.png">
</div>
<script>
window.onscroll = function() {
myFunction()
};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
</header>
<body>
<div class="container">
<img src="straat.jpg" alt="street" id="foto">
<div class="centered">Centered</div>
</div>
</body>
</html>
You can try to add height: 100vh to the #foto element. Hope it helps.
You want to make your image a background image, not an inline image, e.g. use background properties instead of the <img /> tag:
body {
margin: 0;
/* Fullscreen image */
/* get the image source */
background-image: url('/path/to/image.png');
/* center it */
background-position: center center;
/* fix it to the window so it doesn't scroll */
background-attachment: fixed;
/* ensure it covers the whole screen */
background-size: cover;
}
If that's your full site's HTML, it looks like you don't need the JavaScript to make your header stick to the top of the window. You can get what you need for your fixed header by just using CSS.
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
position: fixed; pulls your element out of the regular flow so you'll need to over-compensate for your header's height otherwise it'll cover some of your content:
.header-buffer {
/* overcompensate for fixed header */
padding-top: 60px;
}
The class .header-buffer would be added to the element wrapping the content after the header.
Essentially:
delete your image tag
delete all CSS for #foto
delete your JavaScript
add the background properties to the body CSS
add the .header-buffer class to the same element that has the .container class, e.g. <div class="container header-buffer">...</div>
Here's an example CodePen:
Preview: https://codepen.io/tinacious/full/wRvKwy
source code
In the example you can see that the window can be any size and the image will take up the whole screen. The website content is also scrollable so you can see the header staying fixed to the top.
This is a followup question to the one I asked yesterday.
My goal was to create a box and slide an SVG graphic through the box, so that as the graphic moved, you would only see the parts of the graphic that were in the box, and the parts outside the box would be hidden. Here's the code that made that work:
HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<br><br><br>
<div id="mydiv">
<br><br><br>
<a id="swipe1";><img src="https://www.benngrant.com/html5/shape1.svg" /></a>
<br><br><br><br>
</div>
</body>
CSS:
body {background: #ffffff url("https://www.benngrant.com/wp-content/themes/Abstract_Dark1/images/Bottom_texture.jpg") no-repeat center center fixed; background-size:cover;}
a#swipe1 {transition-timing-function:linear; position:relative; opacity:.62; top:10px; animation: mymove 7.85s forwards;}
#keyframes mymove{from {left:-100%;} to {left:150%;}}
#mydiv {text-align:center; background:black; opacity:.5; max-width:50%; position:relative; margin-left:auto; margin-right:auto; display:block; overflow: hidden; border:1px solid black}
Basically, all I had to do was add overflow:hidden and position:relative to #mydiv to make it work, which was pointed out. (I get why overflow:hidden is needed, still confused why position:relative is, but oh well.)
This time what I am asking is this: Is there an alternate way to accomplish the same effect using the clip-path css property to define a rectangle that hides any part of the moving graphic that is not within the rectangle? Can clip-path in fact be used somehow to define where the browser is permitted to draw the part parts of the image that are within it, as the image moves around following the keyframes? It seems reasonable to me in theory, but I'm not sure how to begin to implement it that way.
Any thoughts? Using just HTML and CSS, but not JavaScript? That creates a result equal to what this does?
https://jsfiddle.net/91p21odc/
Maybe something like this:
body {
background: #ffffff url("https://www.benngrant.com/wp-content/themes/Abstract_Dark1/images/Bottom_texture.jpg") no-repeat center center fixed;
background-size: cover;
}
#mydiv {
margin: 50px 0;
padding: 40px 0;
}
#swipe1 {
transition-timing-function: linear;
opacity: .62;
display: inline-block;
position: relative;
animation: mymove 7.85s forwards;
}
.clip {
clip-path: polygon(40% 0%, 60% 0%, 60% 100%, 40% 100%);
}
#keyframes mymove {
from {
left: -100%;
}
to {
left: 150%;
}
}
#mydiv {
text-align: center;
background: black;
opacity: .5;
max-width: 50%;
position: relative;
margin-left: auto;
margin-right: auto;
display: block;
overflow: hidden;
border: 1px solid black
}
<div id="mydiv">
<div class="clip">
<div id="swipe1">
<img src="https://www.benngrant.com/html5/shape1.svg" />
</div>
</div>
</div>
I want to do CSS3 animation like
#keyframes ImageAnimation {
0%
{
width:100%;
opacity:1;
}
100%
{
width:0;
opacity:0;
}
}
.ImageAnimation {
position: absolute;
top: 0;
width: 0;
height: 100%;
right:0;
overflow:hidden;
animation: ImageAnimation 2s forwards;
}
.ImageAnimation img{
width:100%;
height:100%;
}
<div class="ImageAnimation">
<img src="http://www.w3schools.com/css/img_fjords.jpg" />
</div>
I am overlapping this div on another div which contain same image with some changes. I want to reveal below div with CSS3 animation, but I don't want to compress image while transition.
I don't know if this fits your requirements but you just have to overlap your two images (with overlapping divs or background-image) and set your animation on the front-div as you can see in this jsfiddle.
I set the background-image with:
.bg{
height: 400px;
background-image: url(images/the_image.jpg);
background-size: contain;
background-repeat: no-repeat;
}
I'm kind of stuck here trying to figure out how to keep a background image from sagging below it's DIV. I've had to resort to some rather unsavory tactics.
.animation span {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: -999;
animation-name: fade;
animation-iteration-count: infinite;
animation-duration: 40s;
background-size: cover cover;
background-repeat: no-repeat;
background-position: center center;
}
...
<body>
<div id='banner'>
<div class="animation">
<span id="f4"></span>
<span id="f3"></span>
<span id="f2"></span>
<span id="f1"></span>
</div>
<div id="title">
<h1>Silly Webpage Banner</h1>
</div>
</div>
<div id="content" style="background-color:white;">
Content
</div>
</body>
Here is a fiddle
I've had to add height, width, top to the animation class just be able to see the image. If I exclude z-index, the content DIV sinks a layer. I'd really like it to respect background-size and background-position, but I can't figure out why it won't.
Are you going for something more like this? Where the background animation stuff is all contained within a banner div with a set width/height?
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#banner {
position: relative;
display: block;
height: 4rem;
width: 100%;
overflow: hidden;
}
#banner h1 {
position: absolute;
/* Position banner title */
top:1rem;
left:1rem;
padding:0;
margin:0;
}
#main {
position: relative;
}
.animation div {
position: absolute;
width: 100%;
height: 100%;
animation-name: fade;
animation-iteration-count: infinite;
animation-duration: 40s;
background-size: cover cover;
background-repeat: no-repeat;
background-position: center center;
}
#f1 {
animation-delay: -0s;
background-image: url('https://newevolutiondesigns.com/images/freebies/white-wallpaper-14.jpg');
}
#f2 {
animation-delay: -10s;
background-image: url('http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/08/White-Background-Wallpapers-3D-Ball.jpg');
}
#f3 {
animation-delay: -20s;
background-image: url('http://dlc.middcreate.net/wp-content/uploads/2013/09/quality-photo-for-desktop-white-bubbles-widescreen-picture-and-image-background-wallpaper-with-high-resolution.jpg');
}
#f4 {
animation-delay: -30s;
background-image: url('http://hdpic.org/wp-content/uploads/2015/02/Pattern-Black-and-White-Amazing-Background-Cool-Background.jpg');
}
#keyframes fade {
0% {
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
92% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<!DOCTYPE HTML>
<body>
<div id='banner'>
<div class="animation">
<div id="f4"></div>
<div id="f3"></div>
<div id="f2"></div>
<div id="f1"></div>
</div>
<h1>Silly Webpage Banner</h1>
</div>
<div id="main">
<div id="title">
</div>
<div id="content" style="background-color:white;">
Content
</div>
</div>
</body>
As said in MDN's position reference:
Elements that are positioned relatively are still considered to be in
the normal flow of elements in the document. In contrast, an element
that is positioned absolutely is taken out of the flow and thus takes
up no space when placing other elements. The absolutely positioned
element is positioned relative to nearest positioned ancestor
(non-static). If a positioned ancestor doesn't exist, the initial
container is used.
Therefore your background div is out of the flow being placed on a higher layer thus hiding your content elements: that's why you need the z-index rule.
Finally, as your absolute positioned element does not affects or is affected by its parent, you'll have to define explicitly its dimensions.
I'm kinda wondering what you are trying to achieve here though, could try explaining a little?
.animation {
height: any_height;
position: relative;
width: any_width;
}
I think that might help, if it answers the question.