I am trying to adapt a use of some jscript to make links in text change the full bleed background on a single web page, my hacked attempt is here:
http://testarama.webege.com/
My problem is with smaller screens... if you resize the window then you will notice that the hover backgrounds only fill an area the size of the initial window before scrolling down... but if you are scrolled down fully and using the bottom link then this displays the cutoff with the original background poking out (the test will explain that better than I!).
I've tried various containers and background-attach rules and can't seem to get around this... I'd really like to use this trick for a site so if anyone can shed some light on where it is going wrong that'd be great.
INDEX.HTM =
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tester</title>
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=1">
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script src='leaflet.js' type='text/javascript'></script>
<script src='wax.leaf.js' type='text/javascript'></script>
<link href='leaflet.css' rel='stylesheet' type='text/css' />
<script>
$( document ).ready(function() {
$('p a').each(function() {
var fig = $('<flashers class="'+ $(this).attr('rel') +'"></flashers>');
fig.appendTo('body');
});
$('p a').hover(
function() {
$('body').addClass('hover_on');
$(this).addClass('active');
$('.'+$(this).attr('rel')).addClass('on');
},
function() {
$('body').removeClass('hover_on');
$(this).removeClass('active');
$('.'+$(this).attr('rel')).removeClass('on');
}
);
});
</script>
</head>
<body>
<bound>
<div class="main_box">
<p>This is a background link <a rel="green">that turns green</a>.</p>
<p>This is more text. Lorem ipsum dolor sit amet and so forth and so on and keep going.</p>
<p>This is more text. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going.</p>
<p>This is more text. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going.</p>
<p>This is more text. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going.</p>
<p>This is more text. Lorem ipsum dolor sit amet and so forth and so on and keep going.</p>
<p>This is another background link <a rel="green">that turns green</a>.</p>
<footer />
</div>
</bound>
</body>
</html>
STYLE.CSS:
/*** background tester ***/
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
html, body {
height: 100%;
}
/* Main */
body {
text-align: center;
color: white;
font-family: Georgia, Garamond, Baskerville, serif;
font-size: 12pt;
font-weight: 400;
line-height: 1.5em;
margin: 0 30px;
background: url('red.jpg') center center #222;
background-size: cover;
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
}
flashers {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
display: block;
background-position: center center;
background-size: cover;
background-attachment: fixed;
opacity: 0;
transition: 1s opacity;
-webkit-transition: 1s opacity;
}
::selection { background: rgba(255,255,255,0.7); }
/* Backgrounds */
#media only screen and (min-width: 640px) {
flashers.on { opacity: 1; }
flashers.green { background-image: url('green.jpg'); }
}
/* Content etc. */
bound {
width: 100%;
height: 100%;
max-width: 620px;
margin: 0 auto;
box-sizing: border-box;
-moz-box-sizing: border-box;
display: box;
display: -webkit-box;
display: -moz-box;
box-pack: center;
-webkit-box-pack: center;
-moz-box-pack: center;
box-orient: vertical;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
background: rgba(0,0,0,0.0);
text-align: left;
position: relative;
z-index: 10;
}
/* Big displays etc. */
#media only screen and (min-width: 640px) {
p a {
color: #fff;
margin: 0 3px;
line-height: 0em;
border-bottom: 1px dotted rgba(255,255,255,0.4);
}
p a:not([href]) { pointer-events: auto; }
p a:hover { opacity: 1; }
.hover_on p a[href] { color: transparent; }
.hover_on p a { color: transparent; }
.hover_on p { color: transparent; }
.hover_on p a.active { color: #fff; }
}
/* Other Fixings (some borrowed) */
#media only screen and (max-width: 767px), screen and (max-height: 680px) {
body { font-size: 16pt; }
li { line-height: 1.25em; margin-bottom: 0.6em; }
}
a {
outline: medium none !important;
}
Rest is visible at link: http://testarama.webege.com/
and also in a fiddle
The background is set on flashers element.
And this is descendant from body. So it is dimensioned to the full dimension of body.
But body height is dimensioned as 100%, so it is dimensioned according to the html dimension, that at the end is the dimension of the browser window.
But when you are scrolling, the bottom of the screen is on the bound element, that is sized according to its content, and that, in small browser sizes, has a height greater than body.
you could try to make body adapt to bound, but probably the best solution is to make flashers descendant of bound
Haven't succeeded fully, that's the best I have got :
fiddle
.main_box {
position: relative;
padding-left: 50px;
padding-right: 50px;
z-index: auto;
}
.main_box:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
height: 110%;
z-index: -9;
opacity: 0;
transition: opacity 1s;
margin-left: -30px;
margin-right: -30px;
background-origin: border-box;
background-size: cover;
background-color: green;
background-clip: border-box;
}
.main_box.active:after {
opacity: 1;
}
.green:after {
background-image: url('http://s8.postimg.org/xj53t3d91/green.jpg');
}
Related
I am trying to create an effect on a blog page in which the blog posts are displayed as cards, and whenever one scrolls vertically on the page, a card will fade into view and then fade out when the next card is displayed. Something similar to a carousel/image slider but where only one card is visible at the time. At the same time I want the background image to be fixed. A mix between parallax and carousel.
I have tried to set the cards' container to allow overflow-y so that the cards are scrollable, but I do not want the scrollbar to appear either. Honestly, I have looked everywhere for a similar example, but none are close to what I am trying to achieve.
I have found other examples where I can create a parallax effect, but the thing is I only have one background image. I am not sure if I need to use JavaScript as well to try to implement this design. The closest I have come to is ScrollOut, but I do not know how to make only one card visible at the time.
CodePen
<header>
<div class="logo">
</div>
<div class="title" id='title'>
<h1 data-scroll>One Star Thoughts</h1>
</div>
<nav>
<div class="hamburger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<ul class="nav-links">
<li>Home</li>
</ul>
</nav>
</header>
<div id='stars'></div>
<div id='stars2'></div>
<div id='stars3'></div>
<section class="section__posts">
<div class="section__posts--card">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Lorem ipsum dolor sit amet consectetur.</h1>
<p class="blog-overview">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt incidunt fugiat quos porro repellat harum. Adipisci tempora corporis rem cum.</p>
read
</div>
<div class="section__posts--card">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Lorem ipsum dolor sit amet consectetur.</h1>
<p class="blog-overview">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt incidunt fugiat quos porro repellat harum. Adipisci tempora corporis rem cum.</p>
read
</div>
<div class="section__posts--card">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Lorem ipsum dolor sit amet consectetur.</h1>
<p class="blog-overview">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt incidunt fugiat quos porro repellat harum. Adipisci tempora corporis rem cum.</p>
read
</div>
</section>
If I understand what you're going for, you could use position: sticky along with an IntersectionObserver to create fade-in/fade-out effects.
A basic implementation of a position: sticky layout could be something like this:
<div class="section__posts--card">
<!-- **** add inner wrapper **** -->
<div class="inner-el">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Lorem ipsum dolor sit amet consectetur.</h1>
<p class="blog-overview">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt incidunt fugiat quos porro repellat harum. Adipisci tempora corporis rem cum.</p>
read
</div>
</div>
.section__posts {
width: 100vw;
height: 100vh;
position: relative;
}
.section__posts--card {
height: 200vh; // how far the user should scroll before content changes
}
.inner-el {
top: 200px; // how far from the top of the viewport the content should sit
height: auto;
position: sticky;
width: 75vw;
max-width: 50rem;
margin: auto;
}
This is a pretty good 'tutorial' on how to add IntersectionObserver with position: sticky: https://developers.google.com/web/updates/2017/09/sticky-headers
Thanks to organicon's insight about IntersectionObserver I was able to come up with a solution that created the effect exactly as I wanted.
I made the background fixed and turned off overflow for the body.
I wrapped the cards in a container, and turned on the overflow-y BUT I hid the scrollbar using: scrollbar-width: none; -ms-overflow-style:none;
Wrote a script using IntersectionObserver that will track when a card comes into view. When the card appears a CSS animation is applied that fades the card in.
const callback = (entries) => {
entries.forEach(
(entry) => {
if (entry.isIntersecting) {
console.log("the element is intersecting");
entry.target.style.animation = entry.target.dataset.fade;
entry.target.style.opacity = 1;
} else {
entry.target.style.animation = "none";
entry.target.style.opacity = 0;
}
}
);
}
let observer = new IntersectionObserver(callback);
const fadeItems = document.querySelectorAll('.animate');
fadeItems.forEach(item => {
console.log("adding " + fadeItems.length + " cards to the observer");
observer.observe(item)
});
:root {
--ff-primary: 'Source Sans Pro', sans-serif;
--ff-secondary: 'Source Code Pro', monospace;
--fw-reg: 300;
--fw-bold: 900;
--clr-light: #fff;
--clr-dark: #303030;
--clr-grey: lightgrey;
--clr-accent: #16e0bd;
--clr-danger: tomato;
--fs-h1: 3rem;
--fs-h2: 2.25rem;
--fs-h3: 1.25rem;
--fs-body: 1rem;
--bs: 0.25em 0.25em 0.75em rgba(0, 0, 0, .25), 0.125em 0.125em 0.25em rgba(0, 0, 0, .15);
}
#media (min-width: 900px) {
:root {
--fs-h1: 4.5rem;
--fs-h2: 3.75rem;
--fs-h3: 1.5rem;
--fs-body: 1.125rem;
}
}
html,
body {
margin: 0;
height: 100%;
width: 100%;
}
body {
font-family: var(--ff-primary);
font-size: var(--fs-body);
line-height: 1.6;
box-sizing: border-box;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
background-repeat: no-repeat;
overflow: hidden;
}
img {
display: block;
max-width: 100%;
}
strong {
font-weight: var(--fw-bold)
}
:focus {
outline: 3px solid var(--clr-accent);
outline-offset: 3px;
}
/* wrapper */
.wrapper {
height: 100%;
width: 100%;
}
/* header */
header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: sticky;
top: 0;
width: 100%;
}
nav {
width: 50%;
background-color: transparent;
border: 2px solid;
border-color: var(--clr-light);
border-radius: 2em;
display: flex;
z-index: 10;
}
/*Styling Links*/
.nav-links {
color: var(--clr-light);
display: flex;
list-style: none;
width: 88vw;
padding: 0 0.7vw;
justify-content: space-evenly;
align-items: center;
text-transform: uppercase;
}
.nav-links li a {
text-decoration: none;
margin: 0 0.7vw;
}
.nav-links li a:hover {
color: #61DAFB;
}
.nav-links li {
position: relative;
}
.nav-links li a::before {
content: "";
display: block;
height: 3px;
width: 0%;
background-color: #61DAFB;
position: absolute;
transition: all ease-in-out 250ms;
margin: 0 0 0 10%;
}
.nav-links li a:hover::before {
width: 80%;
}
.login-button {
color: var(--clr-light);
padding: 0.6rem 0.8rem;
margin-left: 2vw;
font-size: 1rem;
cursor: pointer;
}
.login-button:hover {
color: var(--clr-dark);
background-color: #000;
transition: all ease-in-out 350ms;
}
* site title */
.title h1 {
margin: 1em auto;
text-align: center;
color: transparent;
}
#supports(-webkit-text-stroke: 2px var(--clr-light)) {
.title h1 {
color: transparent;
-webkit-text-stroke: 2px var(--clr-light);
text-shadow: none;
}
}
/* section posts */
.posts {
width: 100vw;
height: 100vh;
position: relative;
overflow-y: scroll;
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* Internet Explorer 10+ */
}
.posts::-webkit-scrollbar {
width: 0;
height: 0;
}
.post__card {
height: 50vh;
width: 40rem;
padding: 2rem;
margin: 15rem auto;
background: var(--clr-light);
border-radius: 8px;
opacity: 0;
}
.post__card:first-child {
margin-top: 1rem;
}
.post__card:last-child {
margin-bottom: 22rem;
}
#keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.blog-image {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 10px;
margin-bottom: 10px;
}
.blog-title {
margin-bottom: 1rem;
}
p:last-child {
margin-bottom: -6px;
}
.blog-overview {
margin: 10px 0 20px;
line-height: 30px;
}
.section__posts--card--button {
margin: 0 10px;
}
.btn.dark {
background: var(--clr-dark);
color: var(--clr-light);
}
.btn.grey {
background: var(--clr-grey);
color: var(--clr-dark);
}
.btn.danger {
background: var(--clr-danger);
color: var(--clr-dark);
}
#media (max-width: 600x) {
.posts {
padding: 2.4rem;
}
.section__posts--card {
padding: 2.4rem;
}
}
<div class="wrapper">
<div class='stars'></div>
<div class="stars2"></div>
<div class='stars3'></div>
<header>
<div class="title" id='title'>
<h1>One Star Thoughts</h1>
</div>
<nav>
<div class="hamburger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<ul class="nav-links">
<li>Home</li>
<li><a class="login-button" href="#">Login</a></li>
</ul>
</nav>
</header>
<div class="posts">
<div class="post__card animate" data-fade="fade-in 2s">
<div class="post__wrapper">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Blog title + '...'}</h1>
<p class="blog-overview">This is the blog post test stuff and stuff and stuff and stuff + '...'}</p>
read
</div>
</div>
<div class="post__card animate" data-fade="fade-in 2s">
<div class="post__wrapper">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Blog title + '...'}</h1>
<p class="blog-overview">This is the blog post test stuff and stuff and stuff and stuff + '...'}</p>
read
</div>
</div>
<div class="post__card animate" data-fade="fade-in 2s">
<div class="post__wrapper">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Blog title + '...'}</h1>
<p class="blog-overview">This is the blog post test stuff and stuff and stuff and stuff + '...'}</p>
read
</div>
</div>
<div class="post__card animate" data-fade="fade-in 2s">
<div class="post__wrapper">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Blog title + '...'}</h1>
<p class="blog-overview">This is the blog post test stuff and stuff and stuff and stuff + '...'}</p>
read
</div>
</div>
</div>
</div>
I want to change the style of a <hr> when a div is hovered over. I don't know if the 'onmouseover' is a viable method or if there is some CSS to allow the changing of one element while another parent element is being hover over.
My current HTML is:
<div id="images-landscaping">
<div class='text'>
<h3>Landscaping</h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean scelerisque nec nisl a commodo.</p>
</div>
</div>
My CSS is:
.services {
margin: 0 0 250px 0;
padding: 0;
position: relative;
}
#images-landscaping, #images-res, #images-com {
width: 33.3333%;
height: 250px;
background-position: center;
float: left;
}
#images-landscaping {
background: url('../img/land-opac.jpg') no-repeat center;
}
.text hr {
width: 75px;
float: left;
color: #FDCF08;
background: #FDCF08;
height: 3px;
border: none;
}
What would be the best way to increase the size of the <hr> element when someone hovers their mouse over the div.
Please see the below code, it may help you.
#images-landscaping, #images-res, #images-com {
width: 33.3333%;
height: 250px;
background-position: center;
float: left;
}
#images-landscaping {
background: url('../img/land-opac.jpg') no-repeat center;
}
.text hr {
width: 75px;
float: left;
color: #FDCF08;
background: #FDCF08;
height: 3px;
border: none; -webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
div.text:hover hr{ width:250px; -webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out; }
<div id="images-landscaping">
<div class='text'>
<h3>Landscaping</h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean scelerisque nec nisl a commodo.</p>
</div>
</div>
I have followed a tutorial of responsive grid from this Link and got the following code.
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
.group a:hover{
background: #3374C2;
}
/* GRID OF THREE */
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 66.1%;
}
.span_1_of_3 {
display: block;
width: 32%;
margin: 0.1%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%;}
.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}
.innerDiv{
width: 100%;
border: 1px solid;
border-radius: 15px;
border-color: #F3F3F3;
}
.innerDiv :hover{
border: 1px solid #1abc9c;
}
<div class="section group">
<a href="javascript:void(null);">
<div class="col span_1_of_3">
<div class="innerDiv">
<h5>Illustrator</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
</a>
<div class="col span_1_of_3">
<div class="innerDiv">
<h5>Illustrator</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<div class="col span_1_of_3">
<div class="innerDiv">
<h5>Illustrator</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
</div>
Please note that I have added an additional div named innerDiv. Its css is stated as On hover event I want to change the border color of it.
But instead it is adding the border color to the and tag
Please help!
Thanks in advance.
Replace
.innerDiv :hover{
border: 1px solid #1abc9c;
}
With
.innerDiv:hover{
border: 1px solid #1abc9c;
}
I hope it will solve your problem
This probably has a simple solution, but I am new and can't figure it out. I am trying to just load some text from about.html onto my index page's #content div when I click on my link. The about.html doesn't have anything on it except a div called #content, containing a h2 and some text inside paragraph tags without any styling. Instead it ends up loading the entire index page inside my index's #content div. So far this is what I tried. The name of my index page is called cube2. I know the code is messy, but it's just an experiment and was too lazy to create a new stylesheet, put the CSS in the doc. I apologize for the mess.
Cube2.html Code:
<html xmlns="http://www.w3.org/1999/xhtml" class=" -webkit-">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Cube2</title>
<link href="./cube2_files/css" rel="stylesheet" type="text/css" data-inprogress="">
<script src="./cube2_files/jquery.min.js"></script>
<!-- <script src="js/cube-centered.js"></script> -->
<script type="text/javascript" src="./cube2_files/prefixfree.min.js"></script>
<style type="text/css">
body {
padding: 0;
margin: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
background-image: url(images/wallpaper-660816.jpg);
background-repeat: no-repeat;
background-position: center center;
}
.holoheader {
background-image: url(images/Header.png);
background-repeat: no-repeat;
height: 600px;
width: 700px;
position: relative;
margin-right: auto;
margin-left: auto;
color: #FFF;
-webkit-animation: holowrapper ease 2s infinte;
}
.holowrapper {
height: 600px;
width: 700px;
top: -110px;
margin-right: 60%;
margin-left: 40%;
position: relative;
/*-webkit-perspective: 1000px;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(45deg); */
-webkit-animation: bounce ease 1.0s infinite alternate;
}
#-webkit-keyframes bounce {
0% { top: -110px; }
100% { top: -105px; }
}
.holoheader h2 {
font-family: 'Orbitron', sans-serif;
font-size: 24px;
color: #FFF;
text-align: center;
top: 23px;
position: relative;
}
.hologram {
font-family: 'Orbitron', sans-serif;
height: 400px;
width: 700px;
margin-right: auto;
margin-left: auto;
position: relative;
background-image: url(images/Filler.png);
background-repeat: repeat-y;
top: 68px;
}
.holofooter {
background-image: url(images/Footer.png);
height: 117px;
width: 700px;
position: relative;
top: 70px;
}
.hologram #content {
color: #FFF;
text-align: center;
overflow: scroll;
overflow-x: hidden;
height: 300px;
width: 650px;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 25px;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background-color: #004040;
opacity: 0.3;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-transition: background-color 0.5s ease 0s;
background-color: #2A6964;
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:hover {
background-color: #B7EEF2;
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
.header {
height: 100%;
width: auto;
margin-left: auto;
margin-right: auto;
}
.header #innerheader {
}
.header #innerheader #logo {
margin-right: auto;
margin-left: auto;
height: 90px;
width: 600px;
margin-top: 10px;
-webkit-animation: slidein 2s 1 normal, fadein 2.5s 1 normal;
}
#-webkit-keyframes slidein {
0% { margin-top: -100px; }
100% { margin-top: 10px;; }
}
#-webkit-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#wrapper2 {
min-width: 600px;
}
.navigationmenu {
text-decoration: none;
width: 250px;
margin-left: 15px;
padding: 5px;
height: 90px;
}
.navigationmenu ul {
font-family: 'Orbitron', sans-serif;
font-size: 36px;
list-style-type: none;
margin: 0;
padding: 0;
-webkit-animation: glow 1.5s infinite alternate;
}
/*#-webkit-keyframes glow {
from { text-shadow: 0 0 0px #55A4AC; }
to {
text-shadow: 0px 0px 25px #55A4AC;
}
} */
#-webkit-keyframes glow {
0% { text-shadow: 0 0 15px #55A4AC; }
100% { text-shadow: 0px 0px 25px #55A4AC; }
}
.navigationmenu ul:hover; {
}
.navigationmenu ul a {
text-decoration: none;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
}
a {
color: #fff9d6;
display: block;
width: 60px;
}
</style>
</head>
<body>
<div class="header">
<div id="innerheader">
<div id="logo"><img src="./cube2_files/Purelight.png" width="600" height="101"></div>
</div>
</div>
<div id="wrapper2">
<div class="navigationmenu">
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
</ul>
</div>
<div class="holowrapper">
<div class="holoheader"><h2>Project FreeSky</h2>
<div class="hologram">
<div id="content">
<p>Home</p>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. </p>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="js/general.js"></script>
<div class="holofooter"></div>
</div>
</div>
</div>
</div>
</body>
</html>
About HTML.
<!-- about.html code -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>About</title>
</head>
<body>
<div id="content">
<h2>About</h2>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. </p>
</div>
</body>
</html>
Javascript
// JavaScript
$(document).ready(function() {
$('#content').load('content/cube2');
$('ul#nav li a').click(function() {
var page = $(this).attr('href');
$('#content').load('#content/' + page + '.html');
return false;
});
});
You can use this:
$('ul#nav li a').click(function() {
var page = $(this).attr('href'); // outputs = about.html
$('#content').load(page + ' #content'); // <- targets the html page's div
return false;
});
But my suggestion is to use a different id for parent page div something like #pageContent so that in the markup there would be just one #content div:
$('ul#nav li a').click(function() {
var page = $(this).attr('href'); // outputs = about.html
$('#pageContent').load(page + ' #content'); // <- targets the html page's div
return false;
});
If the loaded HTML only should contain a subset, I think you can do:
$.get(page + '.html', function(d) {
var content = $(d).find("#content");
content.appendTo("appendselector");
});
You get the content from the server, parse it as a document fragment within jquery, then append the inner content to wherever you want it appended to.
I really like the arrowboxes on branch.com, example: http://tinyurl.com/lw5zlhu
How does one create arrowboxes with a timeline like branch.com?
I have done this so fare: http://jsfiddle.net/uFPEf/6/
HTML
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur adipiscing dignissim purus at adipiscing.
</p>
</div>
<div class="timeline">
<div class="line"></div>
</div>
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur adipiscing dignissim purus at adipiscing.
</p>
</div>
<div class="timeline">
<div class="line"></div>
</div>
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur adipiscing dignissim purus at adipiscing.
</p>
</div>
CSS
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
"Helvetica Neue", Helvetica, Arial, "Lucida Grande",
sans-serif;
font-weight: 300;
padding:20px;
}
.item{
border-radius:3px;
padding:10px;
border: solid 1px #EEEEEE;
}
.item p {
color:#333333;
padding:20px;
}
.timeline {
width: 100%;
}
.line {
background: #EEEEEE;
height: 50px;
margin: 0 auto;
width: 2px;
}
You can use CSS' before and after elements. If you target directly where you want with absolute positioning, and give a white background, you can emulate it.
.item:before {
position: absolute;
top: -11px;
left: 50px;
-webkit-transform: rotate(45deg);
height: 20px;
width: 20px;
background: #fff;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
content: '';
}
.item:after {
position: absolute;
bottom: -11px;
left: 50px;
-webkit-transform: rotate(45deg);
height: 20px;
width: 20px;
background: #fff;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
content: '';
}
http://jsfiddle.net/uFPEf/7/
Here is a pure CSS solution
it may be better to use a image though.
HTML:
<div id="box"></div>
CSS:
#box{
width:200px;
height:200px;
background:#EEE;
box-shadow: 0px 0px 2px #999;
margin:50px;
position:relative; /* This makes sure the ::after is absolute to this element */
}
#box:after{
content:''; /* Content is required on all ::before & ::after */
width:22px;
height:22px;
background:#FFF;
border-top: 1px solid #C2C1C1; /* 3D'ish effect */
border-left:1px solid #C2C1C1;
position:absolute;
bottom:-12px; /* Half the height of the square */
left:15px;
-webkit-transform: rotate(45deg); /* rotate 45deg to fake a triangle */
}
Demo