I'm all new to this and I have this site that I'm using to learn the basics. I'm just put together a simple parallax scrolling effect, where the header is scrolling and contains one H1 element.
I've been trying to figure out if it's possible to put some scrolling animation on the text so the text behaves similar to the images in this video from DevTips: https://www.youtube.com/watch?v=WTZpNAbz3jg&feature=player_detailpage
I did try to put some jQuery together to target the H1 and use same technique as shown in the video, but it didn't work. Maybe my code is all wrong because the test he does where the scroll position is printed out in the console did not show for me.
Here's the html and css code that I'm working with. Unfortunately I can't add screenshots since I'm new here and lacking points.
Thanks a bunch!
Html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Parallax</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="masthead">
<h1>Some Text</h1>
</div>
<div class="page"></div>
<script src="jquery-2.1.3.js"></script>
<script src="function.js"></script>
</body>
</html>
CSS
*, *::before, *::after {
box-sizing: border-box;
margin: 0px;
}
html, body {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0px;
padding: 0px;
}
body {
overflow-y: auto;
font-size: 120%;
perspective: 1px;
transform-style: preserve-3d;
}
h1 {
color: #fff;
font-size: 300%;
text-align: center;
padding-top: 200px;
}
.page {
padding: 20px 20%;
position: relative;
top: 60%;
background-color: #fff;
height: 900px;
}
.masthead {
position: absolute;
background: url("000017.jpg");
width: 100%;
height: 60%;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 50% 50%;
background-clip: border-box;
background-origin: padding-box;
background-size: cover;
transform: translateZ(-0.9px) scale(1.9);
z-index: -900;
top: -20%;
}
Your code seems to work very well!
Yet, the effect is not very apparent (but personally, I prefer discrete effects). Look at the snipppet in full page.
*, *::before, *::after {
box-sizing: border-box;
margin: 0px;
}
html, body {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0px;
padding: 0px;
}
body {
overflow-y: auto;
font-size: 120%;
perspective: 1px;
transform-style: preserve-3d;
}
h1 {
color: #fff;
font-size: 300%;
text-align: center;
padding-top: 200px;
}
.page {
padding: 20px 20%;
position: relative;
top: 60%;
background-color: #fff;
height: 900px;
}
.masthead {
position: absolute;
background: url("http://placehold.it/800x600/00ffff/66ffff&text=background") #55ffff;
width: 100%;
height: 60%;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 50% 50%;
background-clip: border-box;
background-origin: padding-box;
background-size: cover;
transform: translateZ(-0.9px) scale(1.9);
z-index: -900;
top: -20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Parallax</title>
</head>
<body>
<div class="masthead">
<h1>Some Text</h1>
</div>
<div class="page"></div>
</body>
</html>
Related
I am trying to make a parallax for the first time and am having troubles.
I'm following this tutorial and then trying to work backwards. The code isn't working however and I'm not sure where I made the mistake, I jumped around to a few other tutorials and tried to adjust the names of different divs and CSS blocks so the code is a bit messy right now.
.html {
height: 100%;
overflow: hidden;
}
.body {
max-width: 30px color: #fff;
margin: 0;
padding: 0;
perspective: 1px;
transform-style: preserve-3d;
height: 100% overflow-y: scroll;
overflow-x: "Luna"
}
header {
box-sizing: border-box;
min-height: 100vh;
padding 30vw 0 5vw;
position: relative;
transform-style: inherit;
width: 100vw;
}
header h1 {
margin-top: -100px;
}
header,
header:before {
background: 50% 50% / cover;
}
header::before {
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
display: block;
background-image: url(picture1.jpg);
background-size: cover;
transform-origin: center center 0;
transform: tranlasteZ(-1px) scale(2);
z-index: -1;
min-height: 100vh;
}
header * {
font-weight: normal;
letter-spacing: 0.2em;
text-align: center;
margin: 0;
padding: 1em 0;
}
.image1 {
background: url('img/(picture1.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed;
height: 500px
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Schade's Parralax</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<p>Hi My name is schade I wrote this so I could have a test of my program.</p>
<div class="image1"> </div>
</div>
</body>
</html>
In first use a container element and add a background image to the container with a specific height. Then use the background-attachment: fixed to create the actual parallax effect.
body,
html {
height: 100%;
}
h1 {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
text-transform: uppercase;
text-align: center;
font-family: Helvetica;
font-size: 75px;
}
.parallax {
background-image: url('https://images.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
height: 100%;
/* Parallax scrolling effect */
background-attachment: fixed; // Try to remove this property
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.content {
height: 300px;
line-height: 300px;
background: #ededed;
position: relative;
z-index: 1;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="parallax"></div>
<div class="content">
<h1>content</h1>
</div>
<div class="parallax"></div>
</body>
</html>
Some mobile devices have a problem with background-attachment: fixed. You can use media queries to turn off the parallax effect:
#media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
More info about fixed property.
I have a background I am trying to place behind my header, but I am having trouble.
All my content is sitting behind the background.
Can anyone give me some insight on what I am doing wrong or missing?
* {
box-sizing: border-box;
}
.header {
background-color: white;
color: #36363F;
height: 600px;
padding: 15px;
}
<div class="header">
<h1>GETUWIRED</h1>
</div>
<div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
<img src='http://www.getuwired.com/devtest/Death_to_stock_photography_Vibrant.jpg' style='width:100%;height:100%' alt='[]' />
</div>
A few ways to do this:
using css background in body (or html) - recommended
* {
box-sizing: border-box;
}
body {
background: url(http://www.getuwired.com/devtest/Death_to_stock_photography_Vibrant.jpg);
}
.header {
background-color: white;
color: #36363F;
height: 600px;
padding: 15px;
}
img {
width: 100%;
height: 100%
}
<div class="header">
<h1>GETUWIRED</h1>
</div>
z-index negative
Use z-index: -1 instead of z-index:0 in the element with background.
Also you can use the image as a background instead of img element, to have a semantic meaning.
* {
box-sizing: border-box;
}
.bg {
background: url(http://www.getuwired.com/devtest/Death_to_stock_photography_Vibrant.jpg);
position: absolute;
z-index: -1;
left: 0;
top: 0;
width: 100%;
height: 100%
}
.header {
background-color: white;
color: #36363F;
height: 600px;
padding: 15px;
}
img {
width: 100%;
height: 100%
}
<div class="header">
<h1>GETUWIRED</h1>
</div>
<div class="bg">
</div>
Note Avoid using inline styles, they are a bad practice.
Since you are stretching the image across the whole viewport, may I suggest you add it as a background-image on the body instead. It will give you a cleaner markup.
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
background: url(http://www.getuwired.com/devtest/Death_to_stock_photography_Vibrant.jpg) center no-repeat;
background-size: cover;
}
.header {
background-color: white;
color: #36363F;
height: 600px;
padding: 15px;
}
</style>
</head>
<body>
<div class="header">
<h1>GETUWIRED</h1>
</div>
</body>
</html>
You should not use img tag as background, you should use css background instead. You could learn css background from here https://developer.mozilla.org/en/docs/Web/CSS/background
In your case, you should rewrite your codes like below. Make use of the body css background.
I adjust the header height to 110px, because before is too high.
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.header {
background-color: white;
color: #36363F;
height: 110px;
padding: 15px;
}
body {
background-image: url('http://www.getuwired.com/devtest/Death_to_stock_photography_Vibrant.jpg');
background-size: 100% 100%;
background-position: 0 0;
}
</style>
</head>
<body>
<div class="header">
<h1>GETUWIRED</h1>
</div>
</body>
</html>
#babar-miamor
Please try changing class container property as below
margin: 0px;
padding: 0px;
height: 100%;
Hope it help.
For the life of me I absolutely CANNOT figure out why my background image is not working. Any help to solve this would be GREATLY appreciated. In the CSS portion, you will find "Backg.jpg". For whatever reason, it refuses to show up even when put as a png, named differently, put in a different folder, or even put into the html (Background image for the body). It's currently structured into a folder called "img". If needed, I can provide screenshots to better show how the folders are. But I can near 95% guarantee folder structure isn't the issue unless i'm just missing something critical.
<!doctype html>
<html lang="">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="socialmediaicons">
<img src="img/fb.png">
<img src="img/twitter.png">
<img src="img/g+.png">
</div>
<h1>COMPUTER</h1>
<h3>Services for both home, and business</h3>
</div>
</div>
</body>
</html>
And
#import url(https://fonts.googleapis.com/css?family=Martel+Sans);
* {
padding: 0;
border: 0;
margin: 0;
font-family: 'Martel Sans', sans-serif;
}
body {
background-image: url(img/backg.jpg);
}
#wrapper {
background-color: #ffffff;
background-position-x: center;
background-position-y: top;
background-position: center top;
background-repeat: no-repeat;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#socialmediaicons {
width: 12%;
margin: 0 auto;
}
#socialmediaicons img {
width: 35px;
padding-left: 10px;
padding-right: 10px;
padding-top: 15px;
}
#header {
border: 2px solid red;
}
#header h1 {
text-align: center;
font-size: 120px;
padding-top: 25px;
letter-spacing: 5px;
}
#header h3 {
text-align: center;
padding-top: 10px;
font-size: 18px;
padding-bottom: 10px;
}
File structure can be found
here
URLs in CSS files are relative to the CSS file that contains them.
In other words, the file you're trying to load from your CSS is:
/css/img/backg.jpg
Change the url to either be absolute (the FQDN and path) or navigate relative to the CSS file:
url( ../img/backg.jpg );
Please remove background-color from #wrapper
#wrapper {
/*background-color: #ffffff;*/Remove or comment this line
}
#import url(https://fonts.googleapis.com/css?family=Martel+Sans);
* {
padding: 0;
border: 0;
margin: 0;
font-family: 'Martel Sans', sans-serif;
}
body {
background-image: url(https://image.freepik.com/free-vector/abstract-background-in-geometric-style_1013-17.jpg);
}
#wrapper {
/*background-color: #ffffff;*/
background-position-x: center;
background-position-y: top;
background-position: center top;
background-repeat: no-repeat;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#socialmediaicons {
width: 12%;
margin: 0 auto;
}
#socialmediaicons img {
width: 35px;
padding-left: 10px;
padding-right: 10px;
padding-top: 15px;
}
#header {
border: 2px solid red;
}
#header h1 {
text-align: center;
font-size: 120px;
padding-top: 25px;
letter-spacing: 5px;
}
#header h3 {
text-align: center;
padding-top: 10px;
font-size: 18px;
padding-bottom: 10px;
}
<html lang="">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="socialmediaicons">
<img src="img/fb.png">
<img src="img/twitter.png">
<img src="img/g+.png">
</div>
<h1>COMPUTER</h1>
<h3>Services for both home, and business</h3>
</div>
</div>
</body>
</html>
Both Matt and Moishe have a point, so first check filenames and positions.
After that you'll notice that it still won't work because of your wrapper id:
#wrapper
it has 100% width/height and it's overlaying over your body with position: fixed and top:0; left:0.
If you remove that wrapper you'll notice that it's showing image correctly.
Could be a misspelling... try to add it manually in your <div> to see if it reads accordingly. ie: <img src="img/back.jpg"> Because you'll get intellisense aid, that should be the right route to copy and paste in your CSS.
Another try.. just convert your png file to jpg.... maybe is inheriting transparency or white background which melt with your body css... Let me know if helps.
I have added a texture background image in html body part and it is repeating the whole body section, but I want this texture will be repeat half of the browser
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Background</title>
<style>
body{
background:url('bg.png');
}
</style>
</head>
<body>
</body>
</html>
reference image - what I want
Just use a pseudo-element on the body that is absolutely positioned.
It's 50% wide, 100% high and over 50%.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
min-height: 100%;
position: relative;
}
body:before {
content: '';
position: absolute;
left: 50%;
height: 100%;
width: 50%;
background-image: url(http://lorempixel.com/image_output/abstract-q-c-25-25-1.jpg);
z-index: -1;
}
h1 {
text-align: center;
color: red;
margin: 0;
}
<h1>My Heading</h1>
Below is the solution
Demo
HTML:
<div id="background"></div>
<div id="wrap">content area</div>
CSS:
body {
background: url('bg.png');
}
#background {
position: fixed;
top: 0px;
left: 0px;
width: 50%;
height: 100%;
background-color:#fff;
z-index: 1;
}
#wrap {
position: relative;
z-index: 2;
padding: 30px;
text-align: center;
font-weight: bold;
}
I am trying to have my background image with a transparent overlay that's split into top and bottom.
Lastnight, in SO Chat, I tried to supply the guys with a JSFiddle, but after posting the code, JSFiddle wasn't able to reproduce the layout correctly. So here's what the desired effect should look like:
(note that this is hand drawn and so you can't see a background image):
You can see that the page should be split horizontally. The blue part should be 50% high and the white part should be 50% high. With a logo in the centre. However, when I add the background image, the white section is pushed down, like this:
(note you still can't see a background image, because it's hand drawn):
Adding a background image to the html element, body element or any child container causes the white div to either be cut off at its top or pushed down, leaving a gap between the bottom edge of the blue section and the top edge of the white section.
How can I get my background image to stop affecting the flow of the document? I didn't think that CSS background images affected layout?
Here is my code:
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Home | Hmmm</title>
<link rel="stylesheet" href="~/Shared/Assets/Stylesheets/Core.css" />
<link rel="stylesheet" href="~/Shared/Assets/Stylesheets/Home.css" />
</head>
<body>
<header>
<img id="key" src="~/Shared/Assets/Images/Icons/Kdfg.png" alt="Sign In | Create an Account" />
<img id="logo" src="~/Shared/Assets/Images/Logos/JdfgWLSS.png" alt="Hmmm" />
</header>
<div id="main">
<footer>
<p style="margin-top: 100px; text-align: center; color: white;">© Hmmm 2015</p>
</footer>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
outline: none;
outline: 0;
border: none;
border: 0;
font-family: 'Segoe UI Light', Tahoma, Geneva, Verdana, sans-serif;
}
html, body
{
width: 100%;
height: 100%;
overflow: hidden;
}
body
{
width: 100%;
height: 100%;
overflow: hidden;
background-image: url('../Images/Backgrounds/JWSSB.jpg');
background-repeat: no-repeat;
background-size: cover;
}
header
{
width: 100%;
height: 50%;
background-color: #2695D7;
opacity: 0.8;
}
#main
{
width: 100%;
height: 50%;
background-color: white;
opacity: 0.8;
}
#key
{
float: right;
}
#logo
{
text-align: center;
margin: 0 auto;
position: absolute;
right: calc(100% / 2 - 176px / 2);
bottom: calc(100% / 2 - 100px / 2);
}
#sections
{
width: 100%;
height: auto;
}
.section
{
width: calc(100% / 3);
height: auto;
float: left;
text-align: center;
font-size: 10pt;
}
I have discovered a workaround. I don't understand it, but it's alright for now:
Add a border to the top of the white section:
#main
{
height: 50%;
background-color: white;
opacity: 0.8;
border-top: 0.1px solid white;
z-index: -100;
}
Then, make the logo appear on top again by changing its z-index:
#logo
{
text-align: center;
margin: 0 auto;
position: absolute;
right: calc(100% / 2 - 176px / 2);
bottom: calc(100% / 2 - 100px / 2);
z-index: 1000;
}
I am not sure if this way will be okay for you, but still. Link to jsfiddle
html:
<div class='top'></div>
<img src='http://silvercreekart.weebly.com/uploads/3/7/3/0/37300503/9869404.png' class='logo'/>
<div class='bottom'></div>
css:
html, body {
height: 100%;
width: 100%;
}
.top {
background: cyan;
height: 50%;
}
.bottom {
background: grey;
height: 50%;
}
.logo {
position: absolute;
left: 50%;
top: 50%;
margin: -128px 0 0 -128px;
}
I like my way much more then using calc. It is better way if you know sizes of your logo (to put it in the middle with negative margin)
Change your CSS to:
body {
height: 100vh
overflow: hidden;
background-image: url(...image...);
background-repeat: no-repeat;
background-size: cover;
}
#main
{
width: 100%;
height: 50%;
background-color: white;
opacity: 0.8;
display: inline-block;
}