I'm having issues with my InsersectionObserver code: The content of the .timeline-graphs class should be appearing from bellow (#keyframes animation in CSS), but only when the the viewport intersects with it, thanks to InsersectionObserver (JS). Simple enough, but I can't manage it to work. This is the code:
HTML, CSS and JAVASCRIPT:
const elementsToExpand = document.querySelectorAll('.timeline-graphs');
let expansionObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.intersectionRatio > 0) {
entry.target.classList.add('isVisible');
} else {
entry.target.classList.remove('isVisible');
}
});
});
elementsToExpand.forEach((element) => {
expansionObserver.observe(element);
});
.timeline-graphs {
display: flex;
flex-flow: row no-wrap;
justify-content: center;
text-align: center;
align-items: center;
}
.timeline-graphs.isVisible {
animation-name: fadeIn;
animation-duration: 2.5s;
animation-fill-mode: both;
}
#keyframes fadeIn {
0% {
opacity: 0;
-webkit-transform: translate3d(0,40%,0);
transform: translate3d(0,40%,0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
}
<section class="timeline-graph-section">
<article class="timeline-graphs">
<h1>This is a title</h1>
</article>
</section>
I appreciate any support on this!
As per your current implementation, the viewport is always intersecting with your timeline-graphs element.
To mimic proper working add a good amount of margin-top to this element and try to bring the timeline-graphs in and out of the view via scroll.
Solved! After seeing the code working everywhere for everybody (including seeing it work in Codepen with my own eyes) but never in my local ropository, I suspected it had to be one of two things: There was an implicit library/framework at work in stackOverflow/CodePen that I wasn't using... or something was up with the HTML code I didn't include in here.
And that was exactly it: I took the script out of the head element and placed it on the last line inside the body element, right before the closing tag. Now the code works! Thank you all for you help with this!
Related
Longer time I'm curious about HTML tag <marquee>.
You can find in MDN specification:
Obsolete
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
or on W3C wiki:
No, really. don't use it.
I searched several articles and found some mention about CSS relevant replacement. CSS attributes like:
marquee-play-count
marquee-direction
marquee-speed
but it seems, they don't work. They were a part of specification in year 2008, but they were excluded in year 2014
One way, proposed by W3 Consortium, is using CSS3 animations, but it seems for me much more complicated than easy-to-maintain <marquee>.
There are also plenty of JS alternatives, with lots of source code that you can add to your projects and make them larger.
I'm always reading things as: "don't ever use marquee", "is obsolete". And I don't get why.
So, can anybody explain to me, why is marquee deprecated, why is so "dangerous" using it and what is the easiest substitution?
I found an example, it looks nice. When you use all prefixes needed for good browser support, you have around 20-25 lines of CSS, with 2 values hardcoded (start and stop indent), depending on text length. This solution is not so flexible, and you can't create bottom-to-top effect with this.
I don't think you should move the content but that doesn't answer your question... Take a look at the CSS:
.marquee {
width: 450px;
line-height: 50px;
background-color: red;
color: white;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee p {
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
}
#keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
Here is the codepen.
Edit:
Here is the bottom to top codepen.
<marquee> was never part of any HTML specification and what you link to is a CSS spec so it's hard to deprecate something that was never included. HTML is about structure of a document, not its presentation. So having a self-animated element as part of HTML does not abide by those goals. Animation is in CSS.
You just have to define class and attached looping animation once in CSS and use it afterwards everywhere you need. But, as many people said - it's a bit annoying practice, and there is a good reason, why this tag is becoming obsolete.
.example1 {
height: 50px;
overflow: hidden;
position: relative;
}
.example1 h3 {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: example1 5s linear infinite;
-webkit-animation: example1 5s linear infinite;
animation: example1 5s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes example1 {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
#-webkit-keyframes example1 {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
#keyframes example1 {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}
<div class="example1">
<h3>Scrolling text... </h3>
</div>
I know this was answered a couple years ago, but I found this when inspecting
this. When I inspected, I found this.
#keyframes scroll {
from {
transform: translate(0,0)
}
to {
transform: translate(-300px,0)
}
}
.resultMarquee {
animation: scroll 7s linear 0s infinite;
position: absolute
}
As stated before: the easiest substitution is CSS animation
To all the critics of the marquee:
It is a very useful tool for UI,
I am using it just on hover,
to display more information in a limited space.
The example for the mp3-player is excellent,
even my car-radio is using the effect to show the current song.
So nothing wrong about that, my opinion ...
I have created a jQuery script that will replace the old marquee tag with standard div. The code will also parse the marquee attributes like direction, scrolldelay and scrollamount. Actually the code can skip the jQuery part but I felt too lazy to do so, and the vanilla JS part is actually a solution that I modified from #Stano answere from here
Here is the code:
jQuery(function($) {
if ($('marquee').length == 0) {
return;
}
$('marquee').each(function() {
let direction = $(this).attr('direction');
let scrollamount = $(this).attr('scrollamount');
let scrolldelay = $(this).attr('scrolldelay');
let newMarquee = $('<div class="new-marquee"></div>');
$(newMarquee).html($(this).html());
$(newMarquee).attr('direction', direction);
$(newMarquee).attr('scrollamount', scrollamount);
$(newMarquee).attr('scrolldelay', scrolldelay);
$(newMarquee).css('white-space', 'nowrap');
let wrapper = $('<div style="overflow:hidden"></div>').append(newMarquee);
$(this).replaceWith(wrapper);
});
function start_marquee() {
let marqueeElements = document.getElementsByClassName('new-marquee');
let marqueLen = marqueeElements.length
for (let k = 0; k < marqueLen; k++) {
let space = ' ';
let marqueeEl = marqueeElements[k];
let direction = marqueeEl.getAttribute('direction');
let scrolldelay = marqueeEl.getAttribute('scrolldelay') * 100;
let scrollamount = marqueeEl.getAttribute('scrollamount');
let marqueeText = marqueeEl.innerHTML;
marqueeEl.innerHTML = marqueeText + space;
marqueeEl.style.position = 'absolute';
let width = (marqueeEl.clientWidth + 1);
let i = (direction == 'rigth') ? width : 0;
let step = (scrollamount !== undefined) ? parseInt(scrollamount) : 3;
marqueeEl.style.position = '';
marqueeEl.innerHTML = marqueeText + space + marqueeText + space;
setInterval(function() {
if (direction.toLowerCase() == 'left') {
i = i < width ? i + step : 1;
marqueeEl.style.marginLeft = -i + 'px';
} else {
i = i > -width ? i - step : width;
marqueeEl.style.marginLeft = -i + 'px';
}
}, scrolldelay);
}
}
start_marquee();
});
.wrap {
width: 50%;
margin: 0 auto;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<marquee direction="left" scrollamount="5" scrolldelay="1"> Timses Jokowi: Apa Urusan Pilpres dengan masuk surga? --- Ma'ruf Amin: Semua orang tahu saya tua, tapi... --- Kata Cak Imin soal pidato Jokowi dan Prabowo yang jadi kontroversi --- 2 tahun ditahan, pendeta AS Andrew Brunson dibebaskan
Turki --- Perkembangan terbaru kasus SPG yang buang bayi dari lantai 3 Mal --- Breaking News --- </marquee>
<marquee direction="rigth" scrollamount="10" scrolldelay="2"> Timses Jokowi: Apa Urusan Pilpres dengan masuk surga? --- Ma'ruf Amin: Semua orang tahu saya tua, tapi... --- Kata Cak Imin soal pidato Jokowi dan Prabowo yang jadi kontroversi --- 2 tahun ditahan, pendeta AS Andrew Brunson dibebaskan
Turki --- Perkembangan terbaru kasus SPG yang buang bayi dari lantai 3 Mal --- Breaking News --- </marquee>
</div>
I need your help
i created a pre-loading screen for a website, and the logo SVG animation is going well, but the only part I m confused with is that:
Every time I reload, the animation doesn’t happen, yet the the 3 seconds of the loader is functional.
Here is the website: http://itsrev.io
here is the code:
var loaderScreen;
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("banner").style.display = "block";
}
function loadingFunction() {
loaderScreen = setTimeout(showPage, 4000);
}
CSS:
/**************************************
Preloader
***************************************/
#loader {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#banner {
display: none;
}
/* Add animation to "page content" */
#banner {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
#keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
The image is being cached. Once the animation has finished, it remains cached in that state.
Possible solutions:
Consider inlining the SVG in your HTML, or
Force the browser to reload the SVG each time. you can do this by having the server set cache control headers for the SVG file. Or you can use javascript on the page to change the URL of the image each time.
For example, something like the following:
<div id="loader">
<img width="400"/>
</div>
function loadingFunction() {
var url = "imgs/logo_svg_animated.svg?r=" + Math.random();
document.querySelector("#loader img").setAttribute("src", url);
loaderScreen = setTimeout(showPage, 4000);
}
The browser things that logo?r=12345 is a different file to logo?r=98765.
This is not an answer. Take it as a long comment.
In your code you have many animations looking like this:
#keyframes whatever {
75% {
opacity: 0;
}
100% {
opacity: 1;
}
0% {
opacity: 0;
}
}
Please note that after 100% comes 0%.
Also: the code is extremely verbose with one animation like this per polygon.
There is another kind of animation in your code looking like this:
#keyframes whatever2 {
0% {
transform: translate(144.77000427246094px, 23.770000457763672px)
translate(-144.77000427246094px, -23.770000457763672px)
translate(-75px, 0px);
}
62.50% {
transform: translate(144.77000427246094px, 23.770000457763672px)
translate(-144.77000427246094px, -23.770000457763672px)
translate(-75px, 0px);
}
75% {
transform: translate(144.77000427246094px, 23.770000457763672px)
translate(-144.77000427246094px, -23.770000457763672px)
translate(0px, 0px);
}
100% {
transform: translate(144.77000427246094px, 23.770000457763672px)
translate(-144.77000427246094px, -23.770000457763672px)
translate(0px, 0px);
}
}
I think you created the CSS code dynamically and your script is not working properly.
Maybe you should need to take a look at the script you have.maybe you should test it first with only one polygon.
I want to blur the whole "body" section of my website until the page has been fully rendered.
I have a preloader set up, it consists of 2 parts ":before" which acts as a background and ":after" which acts as a foreground.
Can I achieve this with just html & css or will I need to modify the JavaScript?
*Here's a perfect "permanent" example of what I want to achieve.
But I only want it to be temporary (until the page loads).
body {
-webkit-filter: blur(20px);
filter: blur(20px);
}
My current website css:
body {
background-color: #fff;
}
.site-preloader:before {
background-color: transparent;
//I want to blur the body here somehow
}
.site-preloader:after {
background: url("/preloader-image.png") 0 0 no-repeat;
z-index: 9999;
}
Whilst it is technically possible to achieve by doing the following
Give your body a class .i.e. .loading apply a filter:blur(200px); and add a javascript snippet that removes the class on page load
document.addEventListener('DOMContentLoaded',function(){
document.body.classlist.remove('loading');
})
This isn't advised - mainly because your css,javascript and html will load at different times so you will likely get different results based on the time it takes to load in your assets.
unless of course you wrap the removal of the class in a settimeout function, but again the problem with this is you are adding unnecessary 'fake' page loading making the page seem even slower
Given the requirement. I would suggest progressive rendering of the above the fold content AKA critical with a CSS in the head section and with a link rel="stylesheet" in the body below the fold. This technique is supported by browsers, (displaying the above the fold content before all assets below the fold are redered), but will trigger html checker errors.
You can also defer the CSS of the below the fold to the bottom of the page. If you need some authority to back you on this turn to Google ...
https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery ...
Also note I'm strongly suggesting opacity since it uses the GPU freeing up the CPU to continue to load the rest of the page. If you blur the page will need to repeat a layout process over and over again and make the load time worse if it is animated, However Louay Madrid solution would not make it worse.
At least give the users a header with the company name and phone number and access to site navigation why these poor souls are waiting for the rest of the page so they don't think there connection died.
<head>
<style>
// above the fold css - desired in html
body {
background-color: #fff;
}
#main {
background: url( ... your image ... );
animation-name: beginPage;
animation-duration: 4s;
-webkit-animation: beginPage 5s; /* Safari 4+ */
-moz-animation: beginPage 5s; /* Fx 5+ */
-o-animation: beginPage 5s; /* Opera 12+ */
animation: beginPage 5s; /* IE 10+, Fx 29+ */
}
#-webkit-keyframes beginPage {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes beginPage {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes NbeginPage {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes beginPage {
0% { opacity: 0; }
100% { opacity: 1; }
}
</style>
</head>
<body>
<div id="main">
Above the fold content
<link rel="stylesheet" href="below the fold.css">
Below the fold content
</div>
</body>
Your css:
body {
-webkit-filter: blur(20px);
filter: blur(20px);
}
Then add this js/jq code to your script body:
window.addEventListener('load', (event) => { $('body').css('webkit-filter', 'blur(0px)');});
Longer time I'm curious about HTML tag <marquee>.
You can find in MDN specification:
Obsolete
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
or on W3C wiki:
No, really. don't use it.
I searched several articles and found some mention about CSS relevant replacement. CSS attributes like:
marquee-play-count
marquee-direction
marquee-speed
but it seems, they don't work. They were a part of specification in year 2008, but they were excluded in year 2014
One way, proposed by W3 Consortium, is using CSS3 animations, but it seems for me much more complicated than easy-to-maintain <marquee>.
There are also plenty of JS alternatives, with lots of source code that you can add to your projects and make them larger.
I'm always reading things as: "don't ever use marquee", "is obsolete". And I don't get why.
So, can anybody explain to me, why is marquee deprecated, why is so "dangerous" using it and what is the easiest substitution?
I found an example, it looks nice. When you use all prefixes needed for good browser support, you have around 20-25 lines of CSS, with 2 values hardcoded (start and stop indent), depending on text length. This solution is not so flexible, and you can't create bottom-to-top effect with this.
I don't think you should move the content but that doesn't answer your question... Take a look at the CSS:
.marquee {
width: 450px;
line-height: 50px;
background-color: red;
color: white;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee p {
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
}
#keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
Here is the codepen.
Edit:
Here is the bottom to top codepen.
<marquee> was never part of any HTML specification and what you link to is a CSS spec so it's hard to deprecate something that was never included. HTML is about structure of a document, not its presentation. So having a self-animated element as part of HTML does not abide by those goals. Animation is in CSS.
You just have to define class and attached looping animation once in CSS and use it afterwards everywhere you need. But, as many people said - it's a bit annoying practice, and there is a good reason, why this tag is becoming obsolete.
.example1 {
height: 50px;
overflow: hidden;
position: relative;
}
.example1 h3 {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: example1 5s linear infinite;
-webkit-animation: example1 5s linear infinite;
animation: example1 5s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes example1 {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
#-webkit-keyframes example1 {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
#keyframes example1 {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}
<div class="example1">
<h3>Scrolling text... </h3>
</div>
I know this was answered a couple years ago, but I found this when inspecting
this. When I inspected, I found this.
#keyframes scroll {
from {
transform: translate(0,0)
}
to {
transform: translate(-300px,0)
}
}
.resultMarquee {
animation: scroll 7s linear 0s infinite;
position: absolute
}
As stated before: the easiest substitution is CSS animation
To all the critics of the marquee:
It is a very useful tool for UI,
I am using it just on hover,
to display more information in a limited space.
The example for the mp3-player is excellent,
even my car-radio is using the effect to show the current song.
So nothing wrong about that, my opinion ...
I have created a jQuery script that will replace the old marquee tag with standard div. The code will also parse the marquee attributes like direction, scrolldelay and scrollamount. Actually the code can skip the jQuery part but I felt too lazy to do so, and the vanilla JS part is actually a solution that I modified from #Stano answere from here
Here is the code:
jQuery(function($) {
if ($('marquee').length == 0) {
return;
}
$('marquee').each(function() {
let direction = $(this).attr('direction');
let scrollamount = $(this).attr('scrollamount');
let scrolldelay = $(this).attr('scrolldelay');
let newMarquee = $('<div class="new-marquee"></div>');
$(newMarquee).html($(this).html());
$(newMarquee).attr('direction', direction);
$(newMarquee).attr('scrollamount', scrollamount);
$(newMarquee).attr('scrolldelay', scrolldelay);
$(newMarquee).css('white-space', 'nowrap');
let wrapper = $('<div style="overflow:hidden"></div>').append(newMarquee);
$(this).replaceWith(wrapper);
});
function start_marquee() {
let marqueeElements = document.getElementsByClassName('new-marquee');
let marqueLen = marqueeElements.length
for (let k = 0; k < marqueLen; k++) {
let space = ' ';
let marqueeEl = marqueeElements[k];
let direction = marqueeEl.getAttribute('direction');
let scrolldelay = marqueeEl.getAttribute('scrolldelay') * 100;
let scrollamount = marqueeEl.getAttribute('scrollamount');
let marqueeText = marqueeEl.innerHTML;
marqueeEl.innerHTML = marqueeText + space;
marqueeEl.style.position = 'absolute';
let width = (marqueeEl.clientWidth + 1);
let i = (direction == 'rigth') ? width : 0;
let step = (scrollamount !== undefined) ? parseInt(scrollamount) : 3;
marqueeEl.style.position = '';
marqueeEl.innerHTML = marqueeText + space + marqueeText + space;
setInterval(function() {
if (direction.toLowerCase() == 'left') {
i = i < width ? i + step : 1;
marqueeEl.style.marginLeft = -i + 'px';
} else {
i = i > -width ? i - step : width;
marqueeEl.style.marginLeft = -i + 'px';
}
}, scrolldelay);
}
}
start_marquee();
});
.wrap {
width: 50%;
margin: 0 auto;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<marquee direction="left" scrollamount="5" scrolldelay="1"> Timses Jokowi: Apa Urusan Pilpres dengan masuk surga? --- Ma'ruf Amin: Semua orang tahu saya tua, tapi... --- Kata Cak Imin soal pidato Jokowi dan Prabowo yang jadi kontroversi --- 2 tahun ditahan, pendeta AS Andrew Brunson dibebaskan
Turki --- Perkembangan terbaru kasus SPG yang buang bayi dari lantai 3 Mal --- Breaking News --- </marquee>
<marquee direction="rigth" scrollamount="10" scrolldelay="2"> Timses Jokowi: Apa Urusan Pilpres dengan masuk surga? --- Ma'ruf Amin: Semua orang tahu saya tua, tapi... --- Kata Cak Imin soal pidato Jokowi dan Prabowo yang jadi kontroversi --- 2 tahun ditahan, pendeta AS Andrew Brunson dibebaskan
Turki --- Perkembangan terbaru kasus SPG yang buang bayi dari lantai 3 Mal --- Breaking News --- </marquee>
</div>
So previously I had been figuring out how to specify which transition activates when a specific page is selected, I figured it out.
Now....I'm curious why there is a trailing section of the previous page when I transition out of my selected effect. Upon each click, you'll notice a trailing, fading section of the previous page:
Example: http://codepen.io/anon/pen/BzFjk
If you take a look at the original page then you'll see what I'm going for:
The goal: tympanus.net (go to Choose a transition > Rotate > Room)
There are many attributes such as the code below specifying the styling for rotateroomLeftOut and rotateRoomLeftIn...etc. But I've matched them exactly to the original code and it still doesn't look like.
#-webkit-keyframes rotateRoomLeftOut {
to { opacity: .9; -webkit-transform: translateX(-100%) rotateY(90deg); }
}
#-moz-keyframes rotateRoomLeftOut {
to { opacity: .9; -moz-transform: translateX(-100%) rotateY(90deg); }
}
#keyframes rotateRoomLeftOut {
to { opacity: .9; transform: translateX(-100%) rotateY(90deg); }
}
#-webkit-keyframes rotateRoomLeftIn {
from { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); }
}
#-moz-keyframes rotateRoomLeftIn {
from { opacity: .3; -moz-transform: translateX(100%) rotateY(-90deg); }
}
#keyframes rotateRoomLeftIn {
from { opacity: .3; transform: translateX(100%) rotateY(-90deg); }
}
There is an opacity in your keyframes which is causing the colors to "trail"
Removing the opacity from the keyframes seems to solve your problem:
#-moz-keyframes moveFromRight {
from { -moz-transform: translateX(100%); }
}
Codepen
I think I found it, the culprit: pt-page-ontop
In all your cases (54 to 57) this class was added (in JS) the the page that moves out...
case 54:
inClass = 'pt-page-rotateRoomLeftIn';
outClass = 'pt-page-rotateRoomLeftOut pt-page-ontop';
break;
...I don't know why this doesn't have the same effect on the tympanus-page, but if I change it to this...
case 54:
inClass = 'pt-page-rotateRoomLeftIn pt-page-ontop';
outClass = 'pt-page-rotateRoomLeftOut';
break;
...it works without the trail.
(You still see a veil of the out-page disappearing, but notice that's also the case on the tympanus-page, but there the transitions are just faster so you don't really see it).
Example: http://codepen.io/anon/pen/dxwuk
(BTW, your CodePen HTML had double html- and body-tags inside the body-tag, CodePen probably fixes that for you on rendering, but better check your code twice)
UPDATE
If you combine MathiasaurusRex' answer with this one, you will lose that last veil as well. Fiddle around with that to see what you like best..
I had the "same" problem months ago.
CSS - <p> leaving a trail when sliding
Sadly I didnt find any good solution, i had to use a PNG image to solve it :(