Basically, I have created a parallax effect with 6 images with media queries for desktop and mobile. The images display fine in desktop mode. However, once I shrink my screen to mobile mode, some of the images just cut off and are not responsive. Because of this, I would like my parallax to only show 4 images on mobile view and the regular 6 images on desktop view. I have tried rearranging my code with my media queries to get this, but I can't seem to figure out a way. How can I do this so only the "viewable" images are only shown on mobile view? Any help is appreciated. Here is my code.
section.module h2 {
margin-bottom: 40px;
font-size: 30px;
}
section.module p {
margin-bottom: 40px;
font-size: 16px;
font-weight: 300;
}
section.module.content {
padding: 40px 0;
background-color: #AFC9F1;
}
section.module.parallax {
height: 800px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
section.module.parallax h1 {
color: rgba(255, 255, 255, 0.8);
font-size: 48px;
line-height: 600px;
font-weight: 700;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.module.parallax-0 {
background-image: url("https://mms.businesswire.com/media/20170310005534/en/574694/5/NIO_EVE_04_Fr34.jpg");
height: 100vh;
opacity: 0.65;
}
section.module.parallax-1 {
background-image: url("https://mms.businesswire.com/media/20170310005534/en/574694/5/NIO_EVE_04_Fr34.jpg");
}
section.module.parallax-2 {
background-image: url("https://autodesignmagazine.com/wp-content/uploads/2017/03/2017031301_nio_eve.jpg");
}
section.module.parallax-3 {
background-image: url("https://www.nio.com/prod/s3fs-public/styles/tile_double_square_desktop_1x/public/2018-09/zip-eve-gallery-5.jpg?Agd8SYcynlrs7LqQu6N.GbrzxLw8vYJF&itok=hGg1N1lm");
}
section.module.parallax-4 {
background-image: url("https://cdn.vox-cdn.com/thumbor/bP1-Ysv4wJcYCMLrAoJv-T03Oto=/0x0:1920x1080/1400x1050/filters:focal(807x387:1113x693):format(jpeg)/cdn.vox-cdn.com/uploads/chorus_image/image/53656791/EVE_005_Overhead.0.jpg");
}
section.module.parallax-5 {
background-image: url("https://cimg1.ibsrv.net/ibimg/hgm/1920x1080-1/100/595/nio-eve-concept-2017-sxsw_100595869.jpg");
}
/* Parallax Mobile */
#media (min-width: 200px) and (max-width: 899px) {
section.module.parallax-0 {
background-image: url("https://miro.medium.com/max/3840/1*LT87ktpOB50UhsrRJYjI5A.jpeg");
}
section.module.parallax-1 {
background-image: url("https://miro.medium.com/max/3840/1*LT87ktpOB50UhsrRJYjI5A.jpeg");
}
section.module.parallax-2 {
background-image: url("https://autodesignmagazine.com/wp-content/uploads/2017/03/2017031301_nio_eve.jpg");
}
section.module.parallax-3 {
background-image: url("https://www.nio.com/prod/s3fs-public/styles/tile_double_square_desktop_1x/public/2018-09/zip-eve-gallery-5.jpg?Agd8SYcynlrs7LqQu6N.GbrzxLw8vYJF&itok=hGg1N1lm");
}
section.module.parallax-4 {
background-image: url("https://cdn.vox-cdn.com/thumbor/bP1-Ysv4wJcYCMLrAoJv-T03Oto=/0x0:1920x1080/1400x1050/filters:focal(807x387:1113x693):format(jpeg)/cdn.vox-cdn.com/uploads/chorus_image/image/53656791/EVE_005_Overhead.0.jpg");
}
section.module.parallax-5 {
background-image: url("https://cimg1.ibsrv.net/ibimg/hgm/1920x1080-1/100/595/nio-eve-concept-2017-sxsw_100595869.jpg");
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Parallax</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css' rel='stylesheet'>
</head>
<body>
<section class="module parallax parallax-0">
<div class="container text-center"></div>
</section>
<section class="module parallax parallax-1">
<div class="container text-center"></div>
</section>
<section class="module parallax parallax-2">
<div class="container text-center"></div>
</section>
<section class="module parallax parallax-3">
<div class="container text-center"></div>
</section>
<section class="module parallax parallax-4">
<div class="container text-center"></div>
</section>
<section class="module parallax parallax-5">
<div class="container text-center"></div>
</section>
<script src="script.js"></script>
</body>
</html>
You can play with background-size:contain on your section.module.parallax class for the mobile view. And for displaying images, you can put display: none on images you don't want to show on mobile.
If I understood you well.
Related
I have a fullpage.js imported into my code and a progress bar indicator (div class="progress-section"). My question is, how do I change the progress bar indicator depending on the background color of a section? (E.g. progress indicator in black when section background color is white, and indicator in white when section bg is black.) I appreciate you all so much :)
I have added the code below:
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Aaron</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css" integrity="sha512-4rPgyv5iG0PZw8E+oRdfN/Gq+yilzt9rQ8Yci2jJ15rAyBmF0HBE4wFjBkoB72cxBeg63uobaj1UcNt/scV93w==" crossorigin="anonymous"
referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
</head>
<body>
<!-- Navigation -->
<!-- <header>
<h4 class="logo">LIGHT</h4>
</a>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li> CONTACT</li>
</ul>
</nav>
</header> -->
<div class="progress-section">
<div class="progress-bar-wrap" data-bg="fuchsia">
<div class="progress-bar" ></div>
</div>
<div class="progress-num"></div>
</div>
<div>
<div id="fullpage">
<div class="section one">
Section ONE
</div>
<div class="section two">
Section TWO
</div>
<div class="section three">
Section THREE
</div>
<div class="section four">
Section FOUR
</div>
</div>
</div>
<!-- Main Container Ends -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js" integrity="sha512-gSf3NCgs6wWEdztl1e6vUqtRP884ONnCNzCpomdoQ0xXsk06lrxJsR7jX5yM/qAGkPGsps+4bLV5IEjhOZX+gg==" crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<script src="scripts.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color:#111111;
color: white;
}
body::-webkit-scrollbar {
display: none;
}
.progress-section {
position: fixed;
right: 50px;
top: 40%;
width: 60px;
height: 20%;
display: flex;
justify-content: space-between;
will-change: transform;
transition: 0.3s ease-out;
z-index: 1;
}
.progress-bar-wrap {
position: relative;
width: 1px;
border: 0;
border-radius: 10px;
overflow: hidden;
background-color: rgb(70, 70, 70);
}
.progress-bar {
position: absolute;
bottom: 0;
width: 100%;
height: 0%;
background-color: rgb(189, 189, 189);
}
.white {
background: white;
}
.one {
background: gray;
}
.two {
background: green;
}
.three {
background: blue;
}
.four {
background: purple;
}
#fullpage {
height: 1000px;
}
JAVASCRIPT
let progressSection = document.querySelector('.progress-section');
let progressBar = document.querySelector('.progress-bar');
let progressNum = document.querySelector('.progress-num');
let x, y;
function updateProgressBar() {
progressBar.style.height = `${getScrollPercentage()}%`;
progressNum.innerText = `${Math.ceil(getScrollPercentage())}%`
requestAnimationFrame(updateProgressBar)
}
function getScrollPercentage() {
return ((window.scrollY) / (document.body.scrollHeight - window.innerHeight) * 100)
};
updateProgressBar()
new fullpage('#fullpage', {
licenseKey: 'LICENSE',
autoScrolling: true,
scrollBar: true,
})
You can use fullpage.js state classes for that.
For example:
/* On section 2 slide 0 */
.fp-viewing-page2-0 #nav{
color: red
}
Here's a working example:
https://codepen.io/alvarotrigo/pen/VwbxbYR
I am new to building Web pages. Just for training, I made a really simple site but, I don't understand why I can't change text size.
If I delete background image code works, but I can't do that like this:
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="jquery/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("h1, p").addClass("dark");
$("div").addClass("important");
});
});
</script>
<style>
body,
html {
height: 100%;
}
#grad1 {
background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
p {
font-size: 28px;
}
.important {
font-weight: bold;
font-size: xx-large;
}
.dark {
color: dark;
}
</style>
</head>
<body>
<div id="grad1">
<div class="container">
<h1 align="center">Dzīves jēga</h1><br><br>
<p align="center"><dfn>“Dzīves jēga nav gaidīt, kad beigsies
negaiss..
bet gan iemācīties dejot lietū!”</dfn></p>
<button type="button" class="btn btn-lg btn-info">Izmaiņas ir
neizbēgamas</button>
</div>
</div>
</body>
I just cant figure this out siting here for 2 days.
The issue was because you did not have the closing bracket for #grad1 style.
Change style to -
#grad1 {
background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Here is the JS Fiddle
I have a project using fullpage.js. And I absolutely do not know how to put one big picture on two screens, so that it does not remain fixed.
Cut the big picture in half and save it as two pictures.
Set the first half as background-image of first section and second one as background-image of last section. You also need to change the background-position to 100% 50% for first and 0 50% for second.
In short:
.first-half {
background: url('/path/to/top-half.png') bottom center no-repeat /cover;
}
.second-half {
background: url('/path/to/bottom-half.png') top center no-repeat /cover;
}
See background shorthand for details.
Here's an example:
var slideTimeout;
$('#fullpage').fullpage({});
#section1{
background:url("https://i.stack.imgur.com/NKI2k.jpg") bottom center /cover;
}
#section2{
background:url("https://i.stack.imgur.com/JXODm.jpg") top center /cover;
}
#fullpage {
color: white;
}
.centered {
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0,0,0,.65);
height: 100vh;
font-size: 3em;
font-family: sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://alvarotrigo.com/fullPage/vendors/jquery.easings.min.js"></script>
<script src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script>
<link href="http://alvarotrigo.com/fullPage/jquery.fullPage.css" rel="stylesheet"/>
<header id="header">
</header>
<div id="fullpage">
<div class="section" id="section1">
<div class="centered">
First Section
</div>
</div>
<div class="section" id="section2">
<div class="centered">
Second Section
</div>
</div>
</div>
UPDATED The white bar is still there, however, the white bar is smaller and so is the image (the image is within the white bar) and the white bar stretches across the whole page. The white bar is above the particles.js and its background.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href='css/style.css' rel='stylesheet' type="text/css">
<title></title>
</head>
<body>
<div id="wrapper">
<center>
<img class='' src='img/kaylumlogo.png'></img>
</center>
</div>
<div id="particles-js"></div>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js">
</script>
<script src="js/index.js">
</script>
</body>
</html>
CSS:
/* ---- reset ---- */
body {
margin: 0;
font: normal 75% Arial, Helvetica, sans-serif;
}
canvas {
display: block;
vertical-align: bottom;
}
/* ---- particles.js container ---- */
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-color: #b61924;
background-image: url("http://i.imgur.com/5F64MpH.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
#wrapper {
border: 0;
width: 200px;
}
img {
width: 200px;
}
Some of your tags are not close, some are closed incorrectly.
We always close a link tag within the tag with "/"
<link ... />
Same with images
<img ... /> instead of <img ... ></img>
I think "< center >" is deprecated.
With good semantic everything is possible.
It might solve your issue
I have problems with retina.js.
Download images https://yadi.sk/d/VEpe-Kdz35PEfr
Why not apply #2x and #3x images? Why retina.js doesn't work? I've been doing documentation. Why this is happening? How to fix this?
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="screen">
body {
text-align: center;
font-family: helvetica, sans-serif;
padding-bottom: 25px;
}
h2 {
margin-top: 35px;
}
.responsive {
width: 80%;
margin: auto;
}
.responsive img {
display: block;
width: auto;
height: auto;
max-width: 100%;
}
.wrapper {
background: #eaeaea;
margin: 35px auto;
width: 1170px;
padding: 25px 25px 45px;
border-radius: 5px;
}
.img-wrapper {
display: inline-block;
width: 30%;
background: rgba(0, 0, 0, .06);
padding: 0 15px 25px;
vertical-align: middle;
border-radius: 3px;
}
.img-wrapper p {
height: 75px;
font-size: 13px;
}
.bg, .bg2, .bg3 {
height: 150px;
}
</style>
<!-- Uncomment one of the following CSS links to test the behavior of a
different CSS preprocessor.-->
<!-- <link type="text/css" rel="stylesheet" href="styles/retina.scss.css"> -->
<!-- <link type="text/css" rel="stylesheet" href="styles/retina.sass.css"> -->
<script type="text/javascript">
// Spoof the browser into thinking it is Retina
// comment the next line out to make sure it works without retina
window.devicePixelRatio = 3;
</script>
</head>
<body>
<div class="wrapper">
<h1>retina.js test environement</h1>
<h2>Img Tags</h2>
<!-- This image does not opt in. It will always be shown at 1x -->
<div class="img-wrapper">
<h3>Img tag #1x</h3>
<p>
This image does not opt in. It will always be shown at 1x.
</p>
<img src="google-logo.png">
</div>
<!-- This image should be shown at 2x all retina environments,
but shown at 1x in non-retina environments. -->
<div class="img-wrapper">
<h3>Img tag #2x</h3>
<p>
This image should be shown at 2x all retina environments,
but shown at 1x in non-retina environments.
</p>
<img src="google-logo.png" data-rjs="2">
</div>
<!-- This image should be shown at 3x in all environments 3x and up,
shown at 2x in 2x environments, and shown at 1x in non-retina
environments. -->
<div class="img-wrapper">
<h3>Img tag #3x</h3>
<p>
This image should be shown at 3x in all environments 3x and up,
shown at 2x in 2x environments, and shown at 1x in non-retina
environments.
</p>
<img src="google-logo.png" data-rjs="3">
</div>
</div>
<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/retina.js/2.1.0/retina.min.js"></script>
</body>
</html>
There must be a bug in v2.1.0, I changed the source of the script to 2.0.0 and it works as expected:
<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/retina.js/2.0.0/retina.min.js"></script>