I'm having trouble limiting the to the screen width on some browsers on my website.
The website in question is: https://teamcob4lt.eu
I'm using a 1920x1080px screen. On FireFox I can't scroll to the right, which is good. However on Chrome and some mobile browsers I can scroll quite a lot to the right using middle mouse button leaving a big gap in the page. There is no horizontal scroll bar though. This is happening to other people using Chrome whom I've asked to test the site as well. I don't want to people able to scroll on the x-axis at all meaning the "Base Layers" should fill the width of the screen all of the time.
Is it related to the fact that some elements are transformed backwards 300px? I can't seem to fix the issue using overflow-x: hidden either. Chrome is also leaving a large white gap at the bottom of the page 100% of the time. Is this related?
Is there anyway to fix this so that I am not able to scroll to the right on the page at all on any browser?
Here is the code which is causing the issue:
/* Styles
--------------------------------------------- */
html {
max-width: 100%;
overflow-x: hidden;
}
body {
font-family: Arial;
margin: 0;
padding: 0;
max-width: 100%;
overflow-x: hidden;
height: auto;
}
.title {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: rgb(255, 255, 255);
}
.info {
font-size: 2vw;
}
/* Parallax Base Styles
--------------------------------------------- */
.parallax {
height: 100vh;
-webkit-perspective: 300px;
perspective: 300px;
width: 100vw;
overflow-x: hidden;
}
.parallax__group {
position: relative;
height: 100vh;
width: 100vw;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax__layer {
width: 100vw;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.parallax__layer--base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
}
.parallax__layer--back {
-webkit-transform: translateZ(-300px) scale(2);
transform: translateZ(-300px) scale(2);
z-index: 3;
background-size: cover;
}
/* Style the Groups
--------------------------------------------- */
#groupH {
z-index: 4;
}
#groupH .parallax__layer--base {
z-index: 1;
background: rgb(0, 0, 0);
height: 50%;
}
#groupH .parallax__layer--back {
z-index: 0;
background-color: rgb(0, 0, 100);
}
#group1 {
z-index: 4;
}
#group1 .parallax__layer--base {
z-index: 1;
background: rgb(0, 0, 0);
height: 50%;
}
#group2 {
z-index: 3;
}
#group2 .parallax__layer--base {
z-index: 1;
background: rgb(0, 0, 0);
height: 50%;
}
#group2 .parallax__layer--back {
z-index: 0;
background-color: rgb(0, 0, 200);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/parallax.css">
<title>Title</title>
</head>
<body>
<div class="parallax">
<div id="groupH" class="parallax__group">
<div id="header" class="parallax__layer parallax__layer--base info">
<div class="title">Header</div>
</div>
<div class="parallax__layer parallax__layer--back">
</div>
</div>
<div id="group1" class="parallax__group">
<div id="info1" class="parallax__layer parallax__layer--base info">
<div class="title">Base Layer 1</div>
</div>
</div>
<div id="group2" class="parallax__group">
<div id="info2" class="parallax__layer parallax__layer--base info">
<div class="title">Base Layer 2</div>
</div>
<div class="parallax__layer parallax__layer--back">
</div>
</div>
</div>
</body>
</html>
Related
I've been working on a site for a friend and I'm attempting to have the inserted image flip over (code below). It won't scale with the container it's in if I apply a card flip animation to it, but it scales perfectly as a plain old image. Is it possible to include the animation so it sits neatly within the box under the border?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: absolute;
width: 118.7%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #000000;
color: black;
}
.flip-card-back {
background-color: #000000;
color: white;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="container">
<hr class="solid">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="image.png" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
</div>
</div>
</div>
</div>
</body>
</html>
When the card is flipped, the front face is turned to the back and hidden, however, the back face is turned but not made visible. My intention is to have whichever side of the card is front-facing made visible. I have tried a number of variations of placing the backface-visibility attribute within different classes/ids but to no avail.
Below is my current code:
body {
background-image: url("imgs/Bike-Logo.jpg");
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;
background-size: 100% 100%;
}
.container {
background: inherit;
}
.card {
width: 350px;
height: 500px;
background: inherit;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
margin-left: -175px;
margin-top: -250px;
border-radius: 8px;
background-color: #707075;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.card::before {
content: "";
position: absolute;
top: -25px;
left: -25px;
bottom: 0;
right: 0;
/*frosted div effect*/
background: inherit;
box-shadow: 100px 0px 20px 200px rgba(255,255,255,0.5);
filter: blur(20px);
}
.flip_card_back {
transform: rotateY(180deg);
}
.card.flipped {
transform: rotateY(180deg);
}
.flip_card_front, .flip_card_back {
backface-visibility: hidden;
}
.sign_up_form {
position: relative;
margin: 10%;
background-color: red;
}
.sign_in_form {
position: relative;
margin: 10%;
background-color: blue;
}
.card figure {
color: white;
}
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Login Page</title>
</head>
<body>
<div class="container">
<div id="card">
<div class="flip_card_front">
<form>
<div class="sign_in_form">
<figure>Front</figure>
</div>
</form>
</div>
<div class="flip_card_back">
<form >
<div class="sign_up_form" >
<figure>Back</figure>
</div>
</form>
</div>
</div>
</div>
<button id="flip">Sign In -></button>
<script src="javascript.js"></script>
</body>
</html>
I would like to include the mouseover 'Shop Now' effect on my images, I used this code:
<!DOCTYPE html>
<html>
<style>
.container {
style= "width:300px;height:300px;"
left: 0;
Right: 0;
}
.image {
opacity: 1;
display: block;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image" >
<div class="middle">
<div class="text">Shop Now</div>
</div>
</div>
</html>
But when I run it on my site the scroll effect works for all 3 images at the same time. As shown below:
What can I do to solve this problem? I have been told previously that if I change the container size to just fit the image it should work, but how would I do that?
<!DOCTYPE html>
<html>
<style>
.container {
width:300px; /*edited here*/
height:300px;
/*this syntax is for html tags ONLY: style= "width:300px;height:300px;"*/
left: 0;
Right: 0;
}
.image {
opacity: 1;
display: block;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image" >
<div class="middle">
<div class="text">Shop Now</div>
</div>
</div>
</html>
you used the wrong syntax for css. style= "width:300px;height:300px;" would be correct if it was in your html like so:
<div class = "container" style= "width:300px;height:300px;"></div>
but in css the style is already implied throught the tags so in css all you need to do is:
.container{
width:300px;
height:300px;
/*and so on*/
}
note: to avoid future problems learn about chrome's inspect tool. It will help you get a better understanding of your page layout and the size of elements and what not. https://developers.google.com/web/tools/chrome-devtools/inspect-styles/
Few short notes:
U cannot use style= "width:300px;height:300px;" within css. Within your example, your first line should be:
.container {
width:300px;
height:300px;
left:0;
Right:0;
}
You can only use the style-attribute within your html, but it is not nessesairy. If you do this, it will bypass your css:
<div class="container" style="width:300px;height:300px;">
You furthermore don't really have to call width and height both, since an image will scale automatically when it has one of these.
With all this being said, I believe this code solves your problem:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
.container {
position: relative;
width: 50%;
width: 200px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: green; /* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
.container:hover .overlay {
opacity: 1;
}
</style>
</head>
<body>
<h2>Image Overlay Title</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">Shop now</div>
</div>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="image">
<div class="overlay">Shop now</div>
</div>
</body>
</html>
I am trying to use the parallax effect on a site that has a fixed nav bar at the top of the page. Due to the way the parallax effect deals with overflows, the scroll bar appears to sit underneath the fixed nav bar at the top of the page.
I have included a fiddle to demonstrate this.
I have tried placing the fixed navbar div inside the parallax container. This moves the navbar beneath the scrollbar but also results in the navbar not fixing to the top of the page.
Here is my code so far...
HTML
<div class="navbar">NavBar</div>
<div class="parallax">
<div class="parallax_layer parallax_layer_back">
<img class="backgroundImage" src="https://images.pexels.com/photos/131212/pexels-photo-131212.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb">
</div>
<div class="parallax_layer parallax_layer_base">
<div class="title">Title</div>
<div class="content">Content area</div>
</div>
</div>
CSS
.parallax {
height: 100vh;
overflow-x: hidden;
overflow-y: initial;
perspective: 1px;
-webkit-perspective: 1px;
}
.parallax_layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax_layer_base {
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
.parallax_layer_back {
transform: translateZ(-1px);
-webkit-transform: translateZ(-1px);
}
.parallax_layer_back { transform: translateZ(-1px) scale(2); }
.parallax_layer_deep { transform: translateZ(-2px) scale(3); }
/* Example CSS for content */
* {
margin: 0;
padding: 0;
}
.title {
position: absolute;
left: 10%;
top: 30%;
color: white;
font-size: 300%;
}
.backgroundImage {
width: 100%;
height: auto;
}
.content {
margin-top: 100vh;
width: 100%;
height: 800px;
background-color: #e67e22;
}
.navbar {width:100%; position: fixed; z-index: 999; background-color: red;}
Based on your source code, I have made a few changes. I'll explain step by step.
Assume that your NavBar's height is 50px, I lower .parallax class 50px down by using margin-top:50px;.
Also, we need to change your NavBar's position property from fixed to absolute.
Now there will be 2 scrollbar, one for the body and one for the .parallax contents. To hide the body's scrollbar, which is unnecessary, we can use overflow:hidden; for body tag.
This time, you will see that your NavBar won't cover the scrollbar, but the bottom of the scrollbar is unfortunately unseeable since the contents is shifted 50px from to top. To solve this I use a simple Jquery code to set .parallax height equal to the remaining window's height.
You can have a look at the snippet.
$(document).ready(function(){
$(".parallax").css("height",$(window).height()-50);
});
.parallax {
margin-top:50px;
overflow-x: hidden;
overflow-y: initial;
perspective: 1px;
-webkit-perspective: 1px;
}
.parallax_layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax_layer_base {
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
.parallax_layer_back {
transform: translateZ(-1px);
-webkit-transform: translateZ(-1px);
}
/* Depth Correction */
.parallax_layer_back { transform: translateZ(-1px) scale(2); }
.parallax_layer_deep { transform: translateZ(-2px) scale(3); }
/* Example CSS for content */
* {
margin: 0;
padding: 0;
}
.title {
position: absolute;
left: 10%;
top: 30%;
color: white;
font-size: 300%;
}
.backgroundImage {
width: 100%;
height: auto;
}
.content {
margin-top: 100vh;
width: 100%;
height: 800px;
background-color: #e67e22;
}
.navbar {
width:100%;
position: absolute;
top:0;
z-index: 999;
background-color: red;
height:50px;
}
body{
overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar"> NavBar </div>
<div class="parallax">
<div class="parallax_layer parallax_layer_back">
<img class="backgroundImage" src="https://images.pexels.com/photos/131212/pexels-photo-131212.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb">
</div>
<div class="parallax_layer parallax_layer_base">
<div class="title">Title</div>
<div class="content">Content area</div>
</div>
</div>
I've been trying to follow the Keith Clark tutorial for parallax images, but I can't seem to get it working correctly.
I'm using the skeleton CSS framework, and am simply trying to recreate an existing website to get some experience with HTML and CSS.
JSFiddle
#ingredients {
postion: float;
padding: 5rem 0 0;
text-align: center;
min-height: 600px;
}
#ingredients h1{
margin-top: 20rem;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);
}
.parallax {
height: 100rem;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 1px;
perspective: 1px;
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 100vh 0;
}
.parallax__layer--base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.parallax__layer--back {
-webkit-transform: translateZ(-1px);
transform: translateZ(-1px);
}
.title{
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div id="ingredients"><!--
--><div class="parallax">
<div class="parallax__layer parallax__layer--back">
<div class="title">
The background
</div>
</div>
<div class="parallax__layer parallax__layer--base">
<div class="title">
<h1>The <strong>Freshest</strong> Seasonal Ingredients</h1>
</div>
</div>
</div>
</div>
Scroll all the way down on the HTML, CSS, and Result section and you will find my attempted parallax section in the #ingredients. Right now my issue is that there are two scrollbars in this section. If I get rid of the extra scrollbar, the parallax no longer works.
If you're referring to the horizontal scroll bar. You can add :
body{
overflow-x:hidden;
}
At the beginning of your CSS. JSFIDDLE