I'm attempting to create a simple parallax effect where each 100vh section scrolls up to reveal the next section (new background color, background image, and text block) while keeping the text block fixed relative to its parent container.
I've put together a static example of what I'm trying to achieve using screenshots of each section: static example. Of course I'd like the content to be dynamic rather than flat images.
Here's a simple version of my code thus far:
body {
margin: 0;
padding: 0;
}
h2 {
font-size: 48px;
}
p {
font-size: 18px;
}
section {
min-height: 100vh;
width: 100%;
text-align: center;
position: relative;
background-attachment: fixed !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
section.first {
background: url(https://picsum.photos/1920/500/?image=1057);
}
section.first .content {
background-color: rgba(74, 180, 220, .85);
}
section.second {
background: url(https://picsum.photos/1920/500/?image=1067);
}
section.second .content {
background-color: rgba(103, 198, 180, .85)
}
section.third {
background: url(https://picsum.photos/1920/500/?image=1033);
}
section.third .content {
background-color: rgba(5, 123, 188, .85);
}
section.fourth {
background: url(https://picsum.photos/1920/500?image=1063);
}
section.fourth .content {
background-color: rgba(187, 216, 100, .85)
}
.content {
position: relative;
height: 100vh;
width: 100%;
padding: 50px 0;
}
.copy {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-family: 'Noto Serif', serif;
font-weight: 300;
}
.button {
border: 2px solid #fff;
border-radius: 3px;
padding: 15px 25px;
display: inline-block;
width: auto;
font-family: 'Assistant', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: .2s ease all;
}
.button:hover {
background: #fff;
color: #333;
cursor: pointer;
}
<body>
<section class="first">
<div class="content">
<div class="copy">
<h2>Header 1 </h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="second">
<div class="content">
<div class="copy">
<h2>Header 2</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="third">
<div class="content">
<div class="copy">
<h2>Header 3</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="fourth">
<div class="content">
<div class="copy">
<h2>Call to action</h2>
<a class="button">Button</a>
</div>
</div>
</section>
</body>
The parallax effect is achieved using CSS background-attachment: fixed and works just fine; the trouble is with the text blocks. I'd like to keep them "pinned" in place and centered within their section. If they are set to position: fixed they of course overlap each other and all show up in the first section. If they are set to any other position attribute, they will simply scroll like any other element.
Now, I realize that setting an element's position to fixed means it can no longer be relative to its parent element; it escapes the flow so to speak, but I'm trying to determine if there's a way to achieve the effect with some advanced CSS or even a JS alternative.
I've tried numerous HTML/CSS combinations (wrappers within wrappers, etc.) and I've also attempted various javascript solutions such as rellax, jarallax, and ScrollMagic, but everything I've come across is far too robust for my needs. I've searched around for the better part of the day hoping to find an example of what I'm attempting, but no luck.
In a previous question I did a similar effect with image and using some JS so am going to use the same technique to reproduce this using content as I don't think there is a pure CSS solution. So the idea is to simulate the fixed position by using absolute position and adjusting the top property dynamically on scroll.
Here is an example where I also adjusted some of the CSS to make it easier. I will also rely on CSS variables to make the JS code very light so we can manage everything with CSS.
window.onscroll = function() {
var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
document.documentElement.style.setProperty('--scroll-var', scroll + "px");
}
:root {
--scroll-var: 0px
}
body {
margin: 0;
padding: 0;
}
h2 {
font-size: 48px;
}
p {
font-size: 18px;
}
section {
min-height: 100vh;
width: 100%;
text-align: center;
overflow: hidden;
background-attachment: fixed !important;
background-size: cover !important;
background-repeat: no-repeat !important;
position: relative; /*Mandatory for the overflow effect*/
height: 100vh;
}
section.first {
background: linear-gradient(rgba(74, 180, 220, .85), rgba(74, 180, 220, .85)), url(https://picsum.photos/1920/500/?image=1057);
}
section.first .content {
/* the first section so top start from 0*/
top: calc((0 * 100vh) + var(--scroll-var));
}
section.second {
background: linear-gradient(rgba(103, 198, 180, .85), rgba(103, 198, 180, .85)), url(https://picsum.photos/1920/500/?image=1067);
}
section.second .content {
/* the second section so we need to remove the height of top section
to have the same position so -100vh and we do the same for the other sections
*/
top: calc((-1 * 100vh) + var(--scroll-var));
}
section.third {
background: linear-gradient(rgba(5, 123, 188, .85), rgba(5, 123, 188, .85)), url(https://picsum.photos/1920/500/?image=1033);
}
section.third .content {
top: calc((-2 * 100vh) + var(--scroll-var));
}
section.fourth {
background: linear-gradient(rgba(187, 216, 100, .85), rgba(187, 216, 100, .85)), url(https://picsum.photos/1920/500?image=1063);
}
section.fourth .content {
top: calc((-3 * 100vh) + var(--scroll-var));
}
.content {
position: absolute;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.copy {
color: #fff;
font-family: 'Noto Serif', serif;
font-weight: 300;
max-width: 300px;
}
.button {
border: 2px solid #fff;
border-radius: 3px;
padding: 15px 25px;
display: inline-block;
width: auto;
font-family: 'Assistant', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: .2s ease all;
}
.button:hover {
background: #fff;
color: #333;
cursor: pointer;
}
<body>
<section class="first">
<div class="content">
<div class="copy">
<h2>Header 1 </h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="second">
<div class="content">
<div class="copy">
<h2>Header 2</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="third">
<div class="content">
<div class="copy">
<h2>Header 3</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="fourth">
<div class="content">
<div class="copy">
<h2>Call to action</h2>
<a class="button">Button</a>
</div>
</div>
</section>
</body>
I have put up a little snippet, that works. But you need to figure out the exact math behind positioning yourself. And of course take care of the details
$( document ).ready(function() {
$(document).scroll(function() {
// get the position of my first slide, so I know where did I move
var rect = $(".first")[0].getBoundingClientRect();
// get height of viewport
var screenHeight = $( window ).height();
// setting offset for every .copy element on page, so they share
// the same offset from top (are on top of each other)
// Now you just need to figure out exact math here
$(".copy").offset({ top: screenHeight*1.5-rect.bottom});
});
});
body {
margin: 0;
padding: 0;
}
h2 {
font-size: 48px;
}
p {
font-size: 18px;
}
section {
min-height: 100vh;
width: 100%;
text-align: center;
position: relative;
background-attachment: fixed !important;
background-size: cover !important;
background-repeat: no-repeat !important;
/* added overflow hidden, so that my boxes don't flow out of the slide */
overflow: hidden;
}
section.first {
background: url(https://picsum.photos/1920/500/?image=1057);
}
section.first .content {
background-color: rgba(74, 180, 220, .85);
}
section.second {
background: url(https://picsum.photos/1920/500/?image=1067);
}
section.second .content {
background-color: rgba(103, 198, 180, .85)
}
section.third {
background: url(https://picsum.photos/1920/500/?image=1033);
}
section.third .content {
background-color: rgba(5, 123, 188, .85);
}
section.fourth {
background: url(https://picsum.photos/1920/500?image=1063);
}
section.fourth .content {
background-color: rgba(187, 216, 100, .85)
}
.content {
position: relative;
height: 100vh;
width: 100%;
padding: 50px 0;
}
.copy {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-family: 'Noto Serif', serif;
font-weight: 300;
}
.button {
border: 2px solid #fff;
border-radius: 3px;
padding: 15px 25px;
display: inline-block;
width: auto;
font-family: 'Assistant', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: .2s ease all;
}
.button:hover {
background: #fff;
color: #333;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<section class="first">
<div class="content">
<div class="copy">
<h2>Header 1 </h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="second">
<div class="content">
<div class="copy">
<h2>Header 2</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="third">
<div class="content">
<div class="copy">
<h2>Header 3</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="fourth">
<div class="content">
<div class="copy">
<h2>Call to action</h2>
<a class="button">Button</a>
</div>
</div>
</section>
</body>
Related
I would like to display a tooltip with item name when user hover over the image item. The items are shown inside a grid with scrollbar (class="itemGrid" and item itself is class="itemOnGrid").
I've tried many solutions over the internet, however I'm learning about CSS now and I could not solve my problem.
HTML
<body>
<center>
<h1>TIBIA SET BUILDER</h1>
<div id='instructions'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae varius lorem. Sed in volutpat orci, id placerat neque. <br>
Nullam ipsum ante, maximus et scelerisque vel, auctor a elit. Nullam neque arcu, venenatis vel elit a, pharetra interdum ipsum.<br>
Aenean nisi sapien, ultricies id mollis ut, sagittis ac erat. Fusce id augue tempus, volutpat orci nec, pretium lectus. Fusce eu diam eros.
Donec hendrerit mattis eros, sed aliquam justo. Duis et fermentum sapien. Duis finibus sem vel augue facilisis ornare.</p>
</div>
<div class='container'>
<div class='menu'></div>
<div class='items'>
<input type="text" id="searchBox" placeholder="Soulstrider, Abyss Hammer, etc...">
<div class='itemGrid' id='scrollbarItems'>
<div class="itemOnGrid" itemName=Giant_Sword><a href=''><img src=Giant_Sword.gif></a><span class="tooltiptext">Giant Sword</span></div>
</div>
</div>
<div class='sets'></div>
</div>
</center>
<script src='main.js'></script>
</body>
CSS
body {
/*background: linear-gradient(#252526, #1e1e1e);*/
background: url(img/wp_soulwar.jpg);
height: 1000px;
align-content: center;
}
h1 {
font-size: 72px;
color: #d2b90a;
}
#instructions {
width:1588px;
height: 100px;
background-color:rgb(24,25,25,0.90);;
border:solid gray 1px;
border-radius: 2px;
padding-left: 10px;
}
p {
text-align: left;
color: white;
}
.container {
display: inline-flex;
flex-direction: row;
gap: 20px;
width:1600px;
height:600px;
background-color: transparent;
margin-top: 20px;
}
.menu {
order: 1;
width:248px;
height:598px;
background-color:rgb(24,25,25,0.90);
border:solid gray 1px;
border-radius: 2px;
}
.items {
order: 2;
width:578px;
height:573px;
background-color:rgb(24,25,25,0.9);
border:solid gray 1px;
border-radius: 2px;
padding-top: 5px;
padding-bottom: 20px;
position: relative;
}
#searchBox{
float: left;
margin-left:6px;
font-size: 15px;
color: gray;
width: 400px;
height: 20px;
background: url(img/loupe.png) no-repeat;
background-position: 3px;
padding-left: 25px;
background-color: rgb(24,25,25);
border: gray solid 1px;
}
.itemGrid {
margin-top: 6px;
display: inline-flex;
align-content: flex-start;
flex-flow: row wrap;
width:568px;
height:545px;
background:transparent;
border-radius: 2px;
overflow-y: hidden;
overflow-x: hidden;
}
.itemGrid:hover {
overflow-y: scroll;
}
.itemOnGrid{
margin-right: 3px;
border: gray solid 1px;
margin-bottom: 3px;
width: 34px;
height: 34px;
background-color: rgb(24,25,25);
opacity: 1;
display: inline-block;
position: relative;
}
/* Tooltip text */
.itemOnGrid .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Position the tooltip text - see examples below! */
position: absolute;
border: gray 1px solid;
}
.itemOnGrid .tooltiptext::after {
content: "";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.itemOnGrid:hover .tooltiptext {
visibility: visible;
z-index: 1;
}
The items are added by JS, I wrote down 3 examples hard-coded.
Image of tooltip being cutted off:
Thanks in advance!
I am afraid, that in your situation you can not solve it with css alone.
Since overflow:hidden cuts off everything outside of it.
You could probably remove position:relative from itemOnGrid class, but all your tooltips would end up in the same place - I really doubt you want to manually position all of them.
My solution is to use javascript for tooltip location(and also change its text).
I did change the placement of your elements a little, also edited the css accordingly for the new view.
The copies of the elements are just for demonstration purposes.
Now the solution is basically this function prepare where I assign eventListeners to every itemOnGrid. In this eventListener I read the position of the element that has been hovered and move (and change text of) the tooltip. I didn't really care about perfect location of the tooltip here, so you might want to play with it a little.
function prepare(){
let items = document.getElementsByClassName('itemOnGrid');
for(let i = 0; i < items.length; i++){
items[i].addEventListener('mouseover', function(){
let tooltip = document.getElementById('tooltip');
let top = this.offsetTop;
let left = this.offsetLeft;
tooltip.style.top = top-30+'px';
tooltip.style.left = left-35+'px';
tooltip.style.display = 'block';
tooltip.innerText = this.getAttribute('itemName');
});
items[i].addEventListener('mouseout', function(){
let tooltip = document.getElementById('tooltip');
tooltip.style.display = 'none';
});
}
};
body {
/*background: linear-gradient(#252526, #1e1e1e);*/
background: url(img/wp_soulwar.jpg);
height: 1000px;
align-content: center;
}
h1 {
font-size: 72px;
color: #d2b90a;
}
#instructions {
width:1588px;
height: 100px;
background-color:rgb(24,25,25,0.90);;
border:solid gray 1px;
border-radius: 2px;
padding-left: 10px;
}
p {
text-align: left;
color: white;
}
.container {
display: inline-flex;
flex-direction: row;
gap: 20px;
width:1600px;
height:600px;
background-color: transparent;
margin-top: 20px;
}
.menu {
order: 1;
width:248px;
height:598px;
background-color:rgb(24,25,25,0.90);
border:solid gray 1px;
border-radius: 2px;
}
.items {
order: 2;
width:578px;
height:573px;
background-color:rgb(24,25,25,0.9);
border:solid gray 1px;
border-radius: 2px;
padding-top: 5px;
padding-bottom: 20px;
position: relative;
}
#searchBox{
float: left;
margin-left:6px;
font-size: 15px;
color: gray;
width: 400px;
height: 20px;
background: url(img/loupe.png) no-repeat;
background-position: 3px;
padding-left: 25px;
background-color: rgb(24,25,25);
border: gray solid 1px;
}
.itemGrid {
margin-top: 6px;
display: inline-flex;
align-content: flex-start;
flex-flow: row wrap;
width:568px;
height:545px;
background:transparent;
border-radius: 2px;
overflow-y: hidden;
overflow-x: hidden;
}
.itemGrid:hover {
overflow-y: scroll;
}
.itemOnGrid{
margin-right: 3px;
border: gray solid 1px;
margin-bottom: 3px;
width: 34px;
height: 34px;
background-color: rgb(24,25,25);
opacity: 1;
display: inline-block;
position: relative;
}
/* Tooltip text */
.tooltiptext {
display:none;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
border: gray 1px solid;
}
.tooltiptext::after {
content: "";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
<body onload="prepare()">
<center>
<h1>TIBIA SET BUILDER</h1>
<div id='instructions'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae varius lorem. Sed in volutpat orci, id placerat neque. <br>
Nullam ipsum ante, maximus et scelerisque vel, auctor a elit. Nullam neque arcu, venenatis vel elit a, pharetra interdum ipsum.<br>
Aenean nisi sapien, ultricies id mollis ut, sagittis ac erat. Fusce id augue tempus, volutpat orci nec, pretium lectus. Fusce eu diam eros.
Donec hendrerit mattis eros, sed aliquam justo. Duis et fermentum sapien. Duis finibus sem vel augue facilisis ornare.</p>
</div>
<div class='container'>
<div class='menu'></div>
<div class='items'>
<input type="text" id="searchBox" placeholder="Soulstrider, Abyss Hammer, etc...">
<div class='itemGrid' id='scrollbarItems'>
<div class="itemOnGrid" itemName=Giant_Sword><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword1><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword2><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword3><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword4><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword5><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword6><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword7><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword1><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword2><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword3><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword4><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword5><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword6><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword7><a href=''><img src=Giant_Sword.gif></a></div>
</div>
<span id='tooltip' class="tooltiptext">Giant Sword</span>
</div>
<div class='sets'></div>
</div>
</center>
</body>
Im doing some modals for a web but they don't show properly on my PC. I played with this code (https://codepen.io/joshuaward/pen/jYZXGo) to do it, adding the information that I would use and changing the font and all went good but when I transfered it to Sublime Text and save it, this is what looks like.
modals
JAVASCRIPT:
const buttons = document.querySelectorAll(`button[data-modal-trigger]`);
for(let button of buttons) {
modalEvent(button);
}
function modalEvent(button) {
button.addEventListener('click', () => {
const trigger = button.getAttribute('data-modal-trigger');
const modal = document.querySelector(`[data-modal=${trigger}]`);
const contentWrapper = modal.querySelector('.content-wrapper');
const close = modal.querySelector('.close');
close.addEventListener('click', () => modal.classList.remove('open'));
modal.addEventListener('click', () => modal.classList.remove('open'));
contentWrapper.addEventListener('click', (e) => e.stopPropagation());
modal.classList.toggle('open');
});
}
I just added a google font (and changed font family in CSS file) + added charset utf-8 (because the information is in spanish) in the top of the original code in the HTML file.
Hi the problem is the code from where you are copying the stuff is using the SCSS
https://codepen.io/joshuaward/pen/jYZXGo
You need to convert or compile the SCSS to CSS
using this link https://www.cssportal.com/scss-to-css/
Below code is for converted CSS from SCSS and working fine.
const buttons = document.querySelectorAll(`button[data-modal-trigger]`);
for(let button of buttons) {
modalEvent(button);
}
function modalEvent(button) {
button.addEventListener('click', () => {
const trigger = button.getAttribute('data-modal-trigger');
const modal = document.querySelector(`[data-modal=${trigger}]`);
const contentWrapper = modal.querySelector('.content-wrapper');
const close = modal.querySelector('.close');
close.addEventListener('click', () => modal.classList.remove('open'));
modal.addEventListener('click', () => modal.classList.remove('open'));
contentWrapper.addEventListener('click', (e) => e.stopPropagation());
modal.classList.toggle('open');
});
}
*, *:before, *:after {
box-sizing: border-box;
outline: none;
}
html {
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
font-smooth: auto;
font-weight: 300;
line-height: 1.5;
color: #444;
background-color: slategray;
}
button {
cursor: pointer;
}
body {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
}
.trigger {
margin: 0 0.75rem;
padding: 0.625rem 1.25rem;
border: none;
border-radius: 0.25rem;
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.12), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.24);
transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
font-size: 0.875rem;
font-weight: 300;
}
.trigger i {
margin-right: 0.3125rem;
}
.trigger:hover {
box-shadow: 0 0.875rem 1.75rem rgba(0, 0, 0, 0.25), 0 0.625rem 0.625rem rgba(0, 0, 0, 0.22);
}
.modal {
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
height: 0vh;
background-color: transparent;
overflow: hidden;
transition: background-color 0.25s ease;
z-index: 9999;
}
.modal.open {
position: fixed;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
transition: background-color 0.25s;
}
.modal.open > .content-wrapper {
transform: scale(1);
}
.modal .content-wrapper {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 50%;
margin: 0;
padding: 2.5rem;
background-color: white;
border-radius: 0.3125rem;
box-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.5);
transform: scale(0);
transition: transform 0.25s;
transition-delay: 0.15s;
}
.modal .content-wrapper .close {
position: absolute;
top: 0.5rem;
right: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border: none;
background-color: transparent;
font-size: 1.5rem;
transition: 0.25s linear;
}
.modal .content-wrapper .close:before, .modal .content-wrapper .close:after {
position: absolute;
content: '';
width: 1.25rem;
height: 0.125rem;
background-color: black;
}
.modal .content-wrapper .close:before {
transform: rotate(-45deg);
}
.modal .content-wrapper .close:after {
transform: rotate(45deg);
}
.modal .content-wrapper .close:hover {
transform: rotate(360deg);
}
.modal .content-wrapper .close:hover:before, .modal .content-wrapper .close:hover:after {
background-color: tomato;
}
.modal .content-wrapper .modal-header {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
margin: 0;
padding: 0 0 1.25rem;
}
.modal .content-wrapper .modal-header h2 {
font-size: 1.5rem;
font-weight: bold;
}
.modal .content-wrapper .content {
position: relative;
display: flex;
}
.modal .content-wrapper .content p {
font-size: 0.875rem;
line-height: 1.75;
}
.modal .content-wrapper .modal-footer {
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
margin: 0;
padding: 1.875rem 0 0;
}
.modal .content-wrapper .modal-footer .action {
position: relative;
margin-left: 0.625rem;
padding: 0.625rem 1.25rem;
border: none;
background-color: slategray;
border-radius: 0.25rem;
color: white;
font-size: 0.87rem;
font-weight: 300;
overflow: hidden;
z-index: 1;
}
.modal .content-wrapper .modal-footer .action:before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: rgba(255, 255, 255, 0.2);
transition: width 0.25s;
z-index: 0;
}
.modal .content-wrapper .modal-footer .action:first-child {
background-color: #2ecc71;
}
.modal .content-wrapper .modal-footer .action:last-child {
background-color: #e74c3c;
}
.modal .content-wrapper .modal-footer .action:hover:before {
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<button data-modal-trigger="trigger-1" class="trigger">
<i class="fa fa-fire" aria-hidden="true"></i>
Modal 1
</button>
<button data-modal-trigger="trigger-2" class="trigger">
<i class="fa fa-fire" aria-hidden="true"></i>
Modal 2
</button>
<button data-modal-trigger="trigger-3" class="trigger">
<i class="fa fa-fire" aria-hidden="true"></i>
Modal 3
</button>
<div data-modal="trigger-1" class="modal">
<article class="content-wrapper">
<button class="close"></button>
<header class="modal-header">
<h2>This is a modal 1</h2>
</header>
<div class="content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.</p>
</div>
<footer class="modal-footer">
<button class="action">Accept</button>
<button class="action">Decline</button>
</footer>
</article>
</div>
<div data-modal="trigger-2" class="modal">
<article class="content-wrapper">
<button class="close"></button>
<header class="modal-header">
<h2>This is a modal 2</h2>
</header>
<div class="content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.</p>
</div>
<footer class="modal-footer">
<button class="action">Accept</button>
<button class="action">Decline</button>
</footer>
</article>
</div>
<div data-modal="trigger-3" class="modal">
<article class="content-wrapper">
<button class="close"></button>
<header class="modal-header">
<h2>This is a modal 3</h2>
</header>
<div class="content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.</p>
</div>
<footer class="modal-footer">
<button class="action">Accept</button>
<button class="action">Decline</button>
</footer>
</article>
</div>
I think you missed add CSS file link or put the SCSS code if you using only HTMl then use css not scss
I try with your code in subline it's work fine
Here i upload link in W3Schoolenter link description here
Website link: https://tomspink.co.uk/portfolio-lovevelo
When clicking on the slider the images will load in, I am not sure why they don't load in on-load. I am using the owl slide: https://owlcarousel2.github.io/OwlCarousel2/
Any help would be great! :)
.owl-carousel .owl-pagination {
text-align: center;
}
.owl-carousel .owl-pagination .owl-page {
border-radius: 8px;
width: 8px;
height: 8px;
display: inline-block;
margin: 0 4px;
position: relative;
background: rgba(255, 255, 255, .7);
display: inline-block;
overflow: hidden;
height: 6px;
width: 6px;
margin: 6px 4px;
text-indent: -200%;
z-index: 1000;
border-radius: 6px;
box-shadow: 0 0 1px rgba(17, 17, 17, .4);
transition: all .3s cubic-bezier(0, 0, .58, 1);
}
.owl-carousel .owl-pagination .owl-page.active {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
.image-slider {
position: relative;
}
.image-slider img {
width: 100%;
}
.image-slider.owl-carousel .owl-prev,
.image-slider.owl-carousel .owl-next {
background: rgba(0, 0, 0, .1);
position: absolute;
border-radius: 8px;
height: 50px;
width: 50px;
top: 50%;
margin-top: -25px;
text-align: center;
line-height: 50px;
font-size: 16px;
display: block;
color: #fff;
transition: .2s linear;
}
.image-slider.owl-carousel .owl-prev:hover,
.image-slider.owl-carousel .owl-next:hover {
background: rgba(0, 0, 0, .3);
}
.image-slider.owl-carousel .owl-prev {
left: 15px;
}
.image-slider.owl-carousel .owl-next {
right: 15px;
}
.image-slider .owl-pagination {
margin-top: -28px;
}
.image-slider .owl-dots {
margin-top: 20px;
}
.tms-slides {
text-align: center;
}
.tms-slides .tms-icons h2 {
line-height: 1;
font-size: 32px;
margin: 0 0 20px;
}
.tms-slides blockquote {
border: 0;
line-height: 1.8;
font-size: 22px;
padding: 20px 0;
margin: 0;
}
<section class="module portfolio-section">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="portfolio-content">
<div class="gallery">
<figure class="gallery-item">
<div class="gallery-icon"><img src="assets/images/portfolio/LV-Intro-Artwork-1920x1280-2.jpg" alt=""></div>
<figcaption class="gallery-caption">KWD Chartered Surveyors</figcaption>
</figure>
</div>
<div class="portfolio-content">
<div class="image-slider owl-carousel fadeOut">
<img src="assets/images/portfolio/LV-carousel-mac-wtr.jpg" alt="">
<img src="assets/images/portfolio/LV-carousel-mac-gall.jpg" alt="">
<img src="assets/images/portfolio/LV-carousel-mac-404.jpg" alt="">
<img src="assets/images/portfolio/LV-carousel-mac-about.jpg" alt="">
</div>
</div>
<div class="gallery gallery-columns-2">
<figure class="gallery-item">
<div class="gallery-icon"><img src="assets/images/portfolio/LV-Letter-card-1920.jpg" alt=""></div>
<figcaption class="gallery-caption">Business card</figcaption>
</figure>
<figure class="gallery-item">
<div class="gallery-icon"><img src="assets/images/portfolio/LV-Business-card-1920.jpg" alt=""></div>
<figcaption class="gallery-caption">Business Card & Letterhead</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
</section>
</figure>
</div>
</div>
</div>
</div>
</div>
</section>
Aenean vitae bibendum erat. Maecenas lobortis libero sed pellentesque aliquam. Morbi non rhoncus nulla, volutpat bibendum sem. Vestibulum sed justo in lorem vulputate ullamcorper. Sed sollicitudin felis a mi consectetur mattis. Maecenas luctus, ex non vestibulum efficitur, neque urna faucibus justo, in porta massa magna id ex. Duis ac eleifend odio. Pellentesque id metus pharetra, lobortis massa a, porttitor nisi. Aliquam erat volutpat. Nullam nibh nulla, porta ac orci sit amet, accumsan porta sem. Cras pharetra, lectus et semper gravida, ligula sem posuere orci, id tincidunt risus sapien non leo. Quisque ac aliquet nisi. Nam placerat tempus leo, non dictum dui vestibulum vel.
I'm using this example CODE.
I have a page with links using href.
And I intend to add links to another page. When clicked on these links, automatically opening the TAB on the secound page, is it possible?
First page with Links:
TAB1
TAB2
Secound page with TABS
Licenciaturas
<ul class="navi">
<li><a class="menu2" href="#tab1">Eng Inf</a></li>
<li><a class="menu3" href="#tab2">Eng Quimic</a></li>
<li><a class="menu4" href="#tab3">Eng Civil</a></li>
</ul>
<br><br>
Mestrados
<ul class="navi">
<li><a class="menu2" href="#tab10">Mestrado 1</a></li>
<li><a class="menu3" href="#tab11">Mestrado 2</a></li>
<li><a class="menu4" href="#tab12">Mestrado 3</a></li>
<li><a class="menu5" href="#tab13">Mestrado 4</a></li>
<li><a class="menu6" href="#tab14">Mestrado 5</a></li>
</ul>
<div id='tab1'>
TEXTO LICENCIATURA 1
</div>
<div id='tab2'>
TEXTO LICENCIATURA 2
</div>
<div id='tab10'>
TEXTO Mestrado 1
</div>
<div id='tab11'>
TEXTO Mestrado 2
</div>
$('ul.prov').on('click', 'a', function (e) {
//Change content displayed
$($("ul.prov a.active")[0].hash).hide();
$(this.hash).show();
//Change active item
$("ul.prov a.active").removeClass("active");
$(this).addClass("active");
e.preventDefault();
});
//Hide all content divs except first one
$("ul.prov a").each(function(index){
if(index != 0)
$(this.hash).hide();
else
$(this).addClass("active");
});
$('a').click(function(){
$("#tabs").tabs("option", "active", parseInt(this.id));
});
Please find the link below
http://jsfiddle.net/priyank_s/5x3yp6Lb/
you just need to use html and css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS3 tabs</title>
<link rel="stylesheet" type="text/css" media="all" href="tabs.css" />
</head>
<style>body
{
font-family: "Segoe UI", arial, helvetica, freesans, sans-serif;
font-size: 90%;
color: #333;
background-color: #e5eaff;
margin: 10px;
z-index: 0;
}
h1
{
font-size: 1.5em;
font-weight: normal;
margin: 0;
}
h2
{
font-size: 1.3em;
font-weight: normal;
margin: 2em 0 0 0;
}
p
{
margin: 0.6em 0;
}
p.tabnav
{
font-size: 1.1em;
text-transform: uppercase;
text-align: right;
}
p.tabnav a
{
text-decoration: none;
color: #999;
}
article.tabs
{
position: relative;
display: block;
width: 40em;
height: 15em;
margin: 2em auto;
}
article.tabs section
{
position: absolute;
display: block;
top: 1.8em;
left: 0;
height: 12em;
padding: 10px 20px;
background-color: #ddd;
border-radius: 5px;
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
z-index: 0;
}
article.tabs section:first-child
{
z-index: 1;
}
article.tabs section h2
{
position: absolute;
font-size: 1em;
font-weight: normal;
width: 120px;
height: 1.8em;
top: -1.8em;
left: 10px;
padding: 0;
margin: 0;
color: #999;
background-color: #ddd;
border-radius: 5px 5px 0 0;
}
article.tabs section:nth-child(2) h2
{
left: 132px;
}
article.tabs section:nth-child(3) h2
{
left: 254px;
}
article.tabs section h2 a
{
display: block;
width: 100%;
line-height: 1.8em;
text-align: center;
text-decoration: none;
color: inherit;
outline: 0 none;
}
article.tabs section,
article.tabs section h2
{
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
article.tabs section:target,
article.tabs section:target h2
{
color: #333;
background-color: #fff;
z-index: 2;
}</style>
<body>
<article class="tabs">
<section id="tab1">
<h2>Tab 1</h2>
<p>This content appears on tab 1.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia elit nec mi ornare et viverra massa pharetra. Phasellus mollis, massa sed suscipit pharetra, nunc tellus sagittis nunc, et tempus dui lorem a ipsum.</p>
<p class="tabnav">next ➧</p>
</section>
<section id="tab2">
<h2>Tab 2</h2>
<p>This content appears on tab 2.</p>
<p>Fusce ullamcorper orci vel turpis vestibulum eu congue nisl euismod. Maecenas euismod, orci non tempus fermentum, leo metus lacinia lacus, nec ultrices quam ligula ac leo. Quisque tortor neque, vulputate quis ultricies ut, rhoncus mollis metus.</p>
<p class="tabnav">next ➧</p>
</section>
<section id="tab3">
<h2>Tab 3</h2>
<p>This content appears on tab 3.</p>
<p>Sed et diam eu ipsum scelerisque laoreet quis in nibh. Proin sodales augue lectus. Maecenas a lorem a mi congue pharetra. Sed sed risus in nisi venenatis condimentum. Donec ac consectetur arcu. Integer urna neque, rutrum at pretium eu.</p>
<p class="tabnav">next ➧</p>
</section>
</article>
</body>
</html>
I have a container where I want to hold information (which would be updated regularly). But sometimes, I might want this information to be long or short, and for this I cant have a fixed height on my container, so depending on the amount of text/information it should resize. Here's my script.
HTML:
<html>
<head>
<title>LoL Champs</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
<link href='http://fonts.googleapis.com/css?family=Sansita+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Belleza' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- NAVIGATION -->
<div id="nav-bar">
<div id="nav-bar-title">LoL Champs</div>
<ul>
<li>Champs</li>
<li>Info</li>
<li>Guides</li>
<li>Model Viewer</li>
<li>Lists</li>
</ul>
</div>
<!-- END NAVIGATION -->
<div id="main-body">
<div id="nav-body-divider"></div>
<p id="home-body-title">News</p>
<!-- News Container -->
<div id="news-container">
</div>
</div>
</body>
</html>
And CSS:
/** MAIN PAGE CONFIG CSS **/
html, body {
width: 100%;
height: 100%;
margin: 0 auto;
max-width: 1920px;
max-height: 1050px;
font-size: 100%;
}
html {
background: url(../images/JinxBG.jpg) 0 0 fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
p {
color: white;
}
a:link {color: inherit;}
a:visited {color: inherit;}
a:active {color: inherit;}
a {text-decoration: none;}
/** MAIN CSS **/
/**NAVIGATION**/
#nav-bar {
width: 100%;
height: 10%;
background-color: #A62D2D;
position: fixed;
box-shadow: 0px 2px 9px black;
font-size: 100%;
max-height: 10%;
max-width: 100%;
}
#nav-bar-title {
font-family: 'Sansita One';
color: #262424;
position: absolute;
width: 20%;
height: 100%;
left: 0.3%;
font-size: 1.8em;
max-width: 16%;
margin-top: 1.2%;
}
#nav-bar ul {
list-style-type: none;
color: #2E2C2C;
font-family: 'Belleza';
font-size: 1.5em;
position: absolute;
top: 0;
max-width: 100%;
max-height: 100%;
left: 15%;
line-height: 0%;
margin-top: 0;
margin-bottom: 10%;
top: 50%;
}
#nav-bar li {
margin-right: 45px;
display: inline;
height: 100%;
-webkit-transition: color 0.5s ease;
}
#nav-bar li:hover {
color: #C7C7C7;
-webkit-transition: color 0.5s ease;
}
/** END NAVIGATION **/
/** MAIN TEXT BODY **/
#nav-body-divider {
width: 100%;
height: 1px;
background: #B55050;
}
#main-body {
max-width: 100%;
max-height: 90%;
background: #A62D2D;
width: 70%;
height: 100%;
margin: auto;
position: relative;
top: 10%;
}
/** MAIN BODY NEWS **/
#home-body-title {
font-size: 2.4em;
font-family: Belleza;
color: #C98A5D;
position: relative;
left: 3%;
top: 0%;
}
#news-container {
width: 45%;
height: 40%;
background: #CF4040;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
position: relative;
left: 3%;
}
I want to resize news-container so that it adapts to the amount of stuff in it, but resize it only on height. The width should stay the same. Also, if the div will be bigger, how can I move the objects that will be below that div to accommodate further down on the page and make space for the big container?
Cheers, Nick
You should never set a height on anything. Always let the content grow naturally. http://jsfiddle.net/LQkj3/
<div id="news-container">
<p>
This is the news section! height will automatically grow depending on the amount of data! you should NEVER control height with pixels or percentage! always let the content grow it automatically.
</p>
</div>
<style>
#news-container { width: 45%; background: #CF4040; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; position: relative; left: 3%; padding: .5em 1em; }
</style>
...Unless of course you need a scrollable container (like #griegs suggested). ;)
Then you could put a max-width: 10em; or something to that effect.
<div style="width:200px; border: 1px solid black; max-height: 400px; overflow: scroll">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et iaculis dui, id dapibus nibh. Phasellus sollicitudin urna non elementum aliquam. Vivamus nec aliquet quam. Mauris eget sollicitudin tellus, at dictum tellus. Donec sed porttitor quam, in suscipit nisl. Praesent vestibulum auctor turpis quis vulputate. Quisque eget erat vel tellus pretium bibendum. Mauris feugiat urna nec pharetra bibendum. Integer consectetur nisl cursus aliquam rhoncus. Mauris vulputate pulvinar commodo. Mauris placerat enim erat, a dignissim metus laoreet quis. Aenean nec ipsum neque. Proin adipiscing tellus ut nisi rutrum tempus. Aliquam erat volutpat. In dignissim consectetur tellus sit amet sagittis. Nam ac quam id nunc adipiscing commodo.
</div>
Remove the overflow and the max-height if these are not important to you. I put them in to demonstrate that pure css should be all you need.
As the div grows, the elements below it will be pushed down so long as they are not positioned absolute or floated etc.