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>
Related
Hi I've been trying to imploment a parallex image into a page today but I cant get the image to be as wide as the page (gets close but leaves a small gap) and also it won't move at all only dissapears when I change position to absolute.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.min.js"></script>
<div class="container">
<div class="parallax" data-parallax="scroll" data-z-index="1" data-image-src="pexels-emiliano-arano-1350197.jpg">
</div>
</div>
.container {
max-width: 100vw;
margin: 0 auto;
}
.parallax {
min-height: 500px;
background: transparent;
}
I'm trying to get a H1 vertically center aligned within a div that has a background image.
I tried this method I found: https://jsfiddle.net/vdqdpyc0/12/
But found that the full height of the banner was only visible if I specifically added a px height to the div, or added padding to either element. This meant that when I resized, there was lots of white space above and below the banner. This wouldn't be an issue if the background was intended to repeat, but it isn't.
The end product needs to look like this.
html,
body {
height: 100%;
}
.outer-wrapper {
background: url("http://paulmason.name/media/demos/full-screen-background-image/background.jpg") no-repeat center center;
background-size: cover;
max-height: 360px;
height: 100%;
}
.inner-wrapper {
display: table;
width: 100%;
height: 100%;
}
.header-wrapper {
display: table-cell;
text-align: center;
vertical-align: middle;
}
h1 {
color: #fff;
}
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="header-wrapper">
<h1>
Vertically aligned text
</h1>
</div>
</div>
</div>
I could go through reducing the padding for various responsive viewpoints, but I figured there has to be a more streamlined way of going about it.
You can achieve this much more easily these days with flexbox, e.g.
html,
body {
height: 100%;
}
.outer-wrapper {
background: url("http://paulmason.name/media/demos/full-screen-background-image/background.jpg") no-repeat center center;
background-size: cover;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
h1 {
color: #fff;
}
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="header-wrapper">
<h1>
Vertically aligned text
</h1>
</div>
</div>
</div>
Example: https://jsfiddle.net/0yxctLne/
You can use a flexbox for this. Here is a pretty simple guide to flexbox. For your issue, it should be enough to pass
display: flex;
flex-direction: column;
justify-content: center;
to the element surrounding the H1 tag, IF the surrounding element is the same height and width as the space you want the H1 tag to be centered in. This will define the main axis as vertical (read: column) and then center all content along the main axis. If you want, you can also add
align-items: center;
to have the text centered along the cross axis (as in horizontally).
Do you need something like this? Flexbox is a nice way to do:
.header-wrapper {
background: url("http://paulmason.name/media/demos/full-screen-background-image/background.jpg") no-repeat center center;
background-size: cover;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
color: #fff;
}
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="header-wrapper">
<h1>
Vertically aligned text
</h1>
</div>
</div>
</div>
Fiddle
I set up CSS Scroll Snap, and I would like to implement easing to it, if possible. Once it snaps to a point, it scrolls too fast. Is there any way to adjust scroll-snap speed/easing using CSS, JavaScript, or an external animation library? My project is an ASP.NET Core 5 MVC web application.
html, body {
margin: 0;
padding: 0;
scroll-snap-type: y proximity;
}
.landing-page-content {
scroll-snap-align: center;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.landing-page-content h1 {
color: black;
margin: 0;
}
.s1 {
background-color: red;
}
.s2 {
background-color: yellow;
}
.s3 {
background-color: blue;
}
.s4 {
background-color: green;
}
.background-image {
background-image: url(..pathToImage);
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 100vw;
background-repeat: no-repeat;
z-index: -1;
}
<body>
<div class="background-image"></div>
<section class="landing-page-content s1">
<h1>Section One</h1>
</section>
<section class="landing-page-content s2">
<h1>Section Two</h1>
</section>
<section class="landing-page-content s3">
<h1>Section Three</h1>
</section>
<section class="landing-page-content s4">
<h1>Section Four</h1>
</section>
</body>
I would recommend expanding the snippet to see the effect better.
No, the css scroll snap property does not allow that. You would need to use touch events with javascript. If you had an image carousel for example you would use translate3d to move it and you would have an easing css property. You would have to write your own logic though to decide when that should kick in based on the way the user swipes in that area.
I'm working on a project with a sidebar and in that side bar there i's like to have a sticky foot. The problem is the side bar scales to the height to the main page content. So if the main page content is bigger than the screen height, you end up with a big space under the footer if you scroll down the page.
I'd like the footer to stay at the bottom of the screen.
Hopefully my description makes sense.
.sidebar {
height: 100%;
}
.card{
display: flex;
flex-direction: column;
min-height: 90vh;
}
.card-body{
flex: 1;
}
.footer{
}
<div class="sidebar">
<div class="card">
<div class="card-header">TITLE</div>
<div class="card-body">
CONTENT
</div>
</div>
<div class="footer">
FEEDBACK CONTENT
</div>
</div>
I would recommend flexbox and the vh CSS measurement.
This example will have the footer stuck to the bottom of the viewport, but will also allow the .sidebar to grow larger than the window height if required. So the .footer will be stuck to the bottom with small content in the .card and will move downwards (requiring scrolling to see) if the content in .card gets bigger.
body {
margin: 0;
padding: 0;
}
.sidebar {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.card {
flex-grow: 1;
}
<html>
<body>
<div class="sidebar">
<div class="card">
<div class="card-header">TITLE</div>
<div class="card-body">
CONTENT
</div>
</div>
<div class="footer">
FEEDBACK CONTENT
</div>
</div>
</body>
</html>
If you really want the .footer stuck to the bottom, even with a lot of contents in the .card, then you could try position: fixed. I've added more content in the .card here so that you can more easily see what happens when it is larger than the body (the body & card content scroll, but .footer is always stuck to the bottom of the viewport).
.card {
/*
.footer is out of the document flow,
so make sure to leave enough space
for it at the bottom of .card
*/
margin-bottom: 1.6em;
}
.footer {
/*
here's the magic, fixed position
at the bottom of the screen
*/
position: fixed;
bottom: 0;
/*
without a bg-color, this will get
messed up with overflowing .card
content
*/
background-color: white;
height: 1.6em;
}
<html>
<body>
<div class="sidebar">
<div class="card">
<div class="card-header">TITLE</div>
<div class="card-body">
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
</div>
</div>
<div class="footer">
FEEDBACK CONTENT
</div>
</div>
</body>
</html>
check this example. it works css-tricks
html for this
<div class="content">
<div class="content-inside">
<h1>Sticky Footer with Negative Margin 2</h1>
<p><button id="add">Add Content</button></p>
</div>
</div>
<footer class="footer">
Footer
</footer>
css for this
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
background: #42A5F5;
color: white;
line-height: 50px;
padding: 0 20px;
}
body {
font: 16px Sans-Serif;
}
h1 {
margin: 0 0 20px 0;
}
p {
margin: 20px 0 0 0;
}
I'm very much basic to jquery so im doing a site where when the page loads, i want my Heading on the top jumbotron fadeIn while the buttons below remains constant.
Could someone help me with this.because the buttons stay on top when the page starts and comes back to its position, i mean to the bottom. when the page completely loads and the Heading fadein...
$(document).ready(function () {
$('.main-heading').fadeIn(1000).removeClass('main-heading-hidden');
});
.jumbotron {
background-image: url("googlenownewyork.png");
background-position: center center ;
background-repeat: no-repeat;
background-size: cover;
width:100%;
height: 600px;
margin:0;
padding: 0;
}
.main-heading{
color: white;
text-align: center;
padding-top:140px;
}
.main-heading-hidden{
display: none;
}
.header-button{
text-align: center;
padding-top: 30px;
}
.header-button .btn:hover{
color: white;
background-color: black;
}
<script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js" ></script>
<script src="metcorp.js" type="text/javascript"></script>
<div class="jumbotron">
<div class="container first-div">
<div class="row main-heading main-heading-hidden">
<h1>Mount Edge Technologies</h1>
<h3></h3>
</div>
<div class="row header-button btn-padding">
<button type="button" class="btn">About Us</button>
<button type="button" class="btn">Get A Quote</button>
</div>
</div>
</div>
display: none removes the header from the layout of the page.
Rather than display, try opacity.
You can also do this with css3 animations fairly easily, avoiding needing to use jquery's fadeIn function at all.
Live Demo
Add this script link to your code.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js" type="text/javascript"></script>
And Don't write this code in ready function:
write directly in script
$('.main-heading').fadeIn(2000).removeClass('main-heading-hidden');