Develop Reference

Continuous scrolling ticker/marquee with multiple messages - JS plugin needed?

A good example of what I'm trying to achieve would be the ticker effect on https://aboutface.com
Based on another example I saw a while back I came up with this. But as you can see, the message crops and you don't see the 2nd message coming into the screen. The scrolling/visible area should span the width of the white box - or 12px from each side with the left/right padding.
https://jsfiddle.net/ho34yvtL/1/
Also, I guess this will be problematic on desktop as you'd need several more duplicate messages. Right now, if I could just display 1 message continuously that'd be great. But ideally I'd like to support multiple.
So basically I want text to scroll continuously across the screen with set spacing between each item. So you see multiple messages at the same time if space allows, unlike the old school marquee tag.
If what I'm trying to achieve isn't possible, is there a preferred method for this, a plugin or will it require complex/custom javascript?

Apply width:100% to .msg. If we want to apply a 12px padding on the left and right, we can use CSS calc() to subtract 24px from 100%.
Additionally, margin-left:50px can be applied to the messages to get that 50px spacing between the two.
The following example preserves the 12px padding in the container whilst maintaining 50px spacing between each item.
body {
background: red;
}
.page-head {
background: white;
box-sizing: border-box;
padding: 0;
position: fixed;
top: 0;
width: 375px;
}
/**
* Ticker
*/
.page-head__ticker {
display: flex;
align-items: center;
justify-content: center;
font-family: "Arial";
font-size: 11px;
font-weight: Bold;
height: 36px;
line-height: 1;
padding: 0 12px;
text-transform: uppercase;
}
.msg {
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
position: absolute;
width:calc(100% - 24px);
}
.msg span {
animation: marquee 6s linear infinite;
display: inline-block;
padding-left: calc(100% - 24px);
margin-left:50px;
}
.msg--two span {
animation-delay:3s;
margin-left:50px;
}
#keyframes marquee {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}
<header class="page-head">
<div class="page-head__ticker">
<p class="msg"><span>Free Shipping on orders over $50</span></p>
<p class="msg msg--two"><span>Free Shipping on orders over $50</span></p>
</div>
</header>

One simple way to get a continuous scrolling effect is to have two copies of your messages and scroll with an animation just 50% of the total width. That way it is smooth - all the messages have gone through and it starts again, 'overwriting' the second copy.
Here's a snippet - it has 24px between the messages but of course such styling can be altered to suit what you want.
body {
background: red;
}
.page-head {
background: white;
box-sizing: border-box;
padding: 0;
position: fixed;
top: 0;
width: 375px;
}
/**
* Ticker
*/
.page-head__ticker {
font-family: "Arial";
font-size: 11px;
font-weight: Bold;
height: 36px;
line-height: 1;
padding: 0 12px;
text-transform: uppercase;
overflow: hidden;
}
.msg {
rmargin: 0 auto;
white-space: nowrap;
overflow: hidden;
animation: marquee 6s linear infinite;
display: inline-block;
}
span {
padding-left: 24px;
/* to give a gap between messages */
}
#keyframes marquee {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-50%, 0);
/* changed from 100% */
}
}
<header class="page-head">
<div class="page-head__ticker">
<p class="msg"><span>Free Shipping on orders over $50</span><span>And here is the second message</span><span>Free Shipping on orders over $50</span><span>And here is the second message</span></p>
</div>
</header>
If your messages are collectively too short to cover the window allocated to the marquee you may want to increase the gap between eg. with a bit of JS.

How can I invert the color black to make it visible during mouseover?

I have a circular mouse sprite that will show the inverse of a color during mouseover. I want to be able to use this to find black text (hidden within a black background) and make the black text visible as white if the circular mouse sprite is over the text.
It looks as follows:
Over text:
I want to make it so that when its over the text "FEELING LEFT IN THE DARK?", the text will appear white, but only within the cursor. For example, in the second image above, only the bottom part of "EL" should be visible as WHITE while the circular mouse sprite is over the text.
I wonder if this is even possible? and if so, help is appreciated.
HTML:
<h1 class="contact-intro">Feeling Left <br> in the dark?</h1>
<span class="cursor"></span>
CSS:
/*The text "Feeling left in the dark?*/
.contact-intro {
text-align: left;
justify-content: center;
margin: auto;
margin-left: 28.55%;
margin-top: 3%;
display: inline-block;
text-transform: uppercase;
color: black;
font-size: 7em;
z-index: 500;
}
/*The Cursor*/
#media ( hover: none ) {
.cursor {
display: none !important;
}
}
* {
cursor: none;
}
.cursor {
--size: 80px;
height: var( --size );
width: var( --size );
border-radius: 50%;
pointer-events: none;
position: absolute;
transform: translate( -50%, -50% );
z-index: 1;
}
.cursor.cursor-dot {
background: orangered; /* This defines the color of the cursor */
mix-blend-mode: difference;
transition: width 0.6s, height 0.6s, background-color 0.6s;
transition-timing-function: ease-out;
}
.cursor-dot.active {
--size: 50px;
background-color: #ffffff;
}
JQUERY:
//text inversion
$(() => {
$('body').prepend('<div class="cursor cursor-dot" style="left: 0px; top: 0px;">');
$(window).mousemove(function (e) {
$('.cursor').css({
left: e.pageX,
top: e.pageY
});
});
$(window).mousemove(function (e) {
$('a').on('mouseenter', function () {
$('.cursor').addClass('active');
});
});
$(window).mousemove(function (e) {
$('a').on('mouseleave', function () {
$('.cursor').removeClass('active');
});
});
});

This isn't exactly what you asked for, since the text color isn't inverted...but the black still shows up against the red cursor element as it moves around. Pretty simple to do with z-index.
const cur = document.querySelector('#cur');
const { width, height } = cur.getBoundingClientRect();
document.addEventListener('mousemove', e => {
cur.style.top = e.y - height / 2 + 'px';
cur.style.left = e.x - width / 2 + 'px';
});
html,
body {
height: 100%;
padding: 0;
margin: 0;
background-color: black;
}
#txt {
position: relative;
color: black;
background-color: transparent;
z-index: 300;
font-size: 3rem;
padding: 1rem;
}
#cur {
position: absolute;
width: 3rem;
height: 3rem;
border-radius: 1.5rem;
background-color: red;
z-index: 200;
}
<div id='txt'>FEELING LEFT IN THE DARK?</div>
<div id='cur'></div>

Stuck on trying to replicate a certain CSS-Transition (CTA-Button that moves to the bottom corner of the page when scrolling down and gets fixed)

So here is a simple fiddle (http://jsfiddle.net/t1xywroc/2/) I created to show you the animation I'm trying to replicate (from this website: https://paperpillar.com/).
I'm still fairly new to Javascript/Jquery and have only been doing HTML and CSS for a couple months.
The problem about my animation is that (as far I know) there is no transition from an absolute position to a fixed position, which I believe causes that small jump, right after triggering the animation (or transition if you will). The second problem is, that the content of the ::before element can't be transitioned either. How can I fix these things using jQuery?
I tried to get it work by using mostly CSS but I keep coming across new problems. I guess it's inevitable to use JavaScript, which is what I need help with. I'd really appreciate it.
Note: not a native speaker.
HTML
<div class="section">
<div class="button"></div>
</div>
CSS
.section {
height: 2000px;
width: auto;
}
.button {
position: absolute;
transform: translateX(50%);
right: 50%;
display: inline-block;
color: white;
line-height: 60px;
height: 60px;
width: auto;
padding-left: 25px;
padding-right: 25px;
background-color: blue;
border-radius: 25px;
vertical-align: middle;
top: 15rem;
}
.button::before{
content: 'Button Text';
}
.floating {
padding-left: 0px;
padding-right: 0px;
position: fixed;
right: 15px;
top: calc(100vh - 120px);
transform: none;
height: 80px;
width: 80px;
transition: all 1.5s ease-in-out;
background-color: red !important;
border: none;
border-radius: 50%;
justify-content: center;
text-align: center;
}
.floating::before{
content:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' fill='white'><path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /></svg>");
}
JS
$(document).ready(function() {
$(window).on('scroll', function() {
if ($(window).width() <= 768) {
var scrollTop = $(this).scrollTop();
$('.button').each(function() {
var topDistance = $(this).offset().top;
if ((topDistance - 30) < scrollTop) {
$(this).addClass('floating');
// Haven't put much thought into this part yet
} else if ((topDistance - 30) >= scrollTop){
}
});
}
});
});

A couple of problems have been highlighted in the question: the 'jump' when the transition moves between absolute and fixed and the fact that pseudo elements' content can not be transitioned.
To get round the absolute to fixed jump problem we can set the button to fixed as soon as the transition is to start and then transition. This is possible by introducing CSS animations rather than transitions.
To appear to transition between content we use before pseudo element to hold the initial text (as in the code given) and introduce an after pseudo element that holds the svg. To give the appearance of transitioning between the two we animate opacity.
Note: in the website which is to be emulated the button initially has a white background over the page's white background. This means the change in shape as the initial button fades away is less obvious. With a contrasting blue background the change in shape is much more obvious. That may or may not be the effect required.
Here's a snippet with animations instead of transitions and moving to fixed immediately the animation starts.
$(document).ready(function() {
$(window).on('scroll', function() {
if ($(window).width() <= 2500) {
var scrollTop = $(this).scrollTop();
$('.button').each(function() {
var topDistance = $(this).offset().top;
if ((topDistance - 30) < scrollTop) {
$(this).addClass('floating');
} else if ((topDistance - 100) >= scrollTop){
}
});
}
});
});
.section {
height: 2000px;
width: auto;
position: relative;
}
.button, .button::before, .button::after {
animation-duration: 1.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
position: absolute;
}
.button {
transform: translateX(50%);
right: 50%;
line-height: 60px;
height: 60px;
width: auto;
color: transparent; /* do this to ensure the button has dimensions so it can be clicked */
display: inline-block;
vertical-align: middle;
top: 15rem;
}
.button.floating {
position: fixed;
top: 30px;
animation-name: floatdown;
}
.button::before {
content: 'Button\00a0 Text';
opacity: 1;
color: white;
line-height: 60px;
height: 60px;
width: auto;
padding-left: 25px;
padding-right: 25px;
background-color: blue;
border-radius: 25px;
}
.button::after {
content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' fill='white'><path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /></svg>");
opacity: 0;
padding-left: 0px;
padding-right: 0px;
height: 80px;
width: 80px;
margin-left: -50%;
background-color: red;
border: none;
border-radius: 50%;
justify-content: center;
text-align: center;
}
div.button.floating::before {
animation-name: fadeout;
}
div.button.floating::after {
animation-name: fadein;
}
#keyframes fadeout {
100% {
opacity: 0;
}
}
#keyframes fadein {
100% {
opacity: 1;
}
}
#keyframes floatdown {
100% {
top: calc(100vh - 120px);
right: 95px; /* 80+15px */
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">
<div class="button">Button text</div>
</div>
Note also that if you want the downarrow to fill the circle more you could put it as a background-image with size contain rather than as content.

How can I show a tooltip when a user hovers over the box shadow of an element?

I have an element that is 1x1 px, with a box shadow that is much larger.
I would like a tooltip to display whenever the user hovers, but the problem is that the tooltip only activates when the user hovers over the 1x1 px area, ignoring the huge box shadow.
The blue element (glow) in this fiddle is an example. I tried making the green element (glow2) larger just to show how the tooltip should look.
https://jsfiddle.net/fortunette/fLm3d7oz/1/
.glow {
width: 1px;
height: 1px;
background-color: blue;
border-radius: 50%;
box-shadow: 0 0 24px 19px blue;
position:absolute;
top:300px;
left:100px;
}
Other requirements are that there are an arbitrary number of these glowing elements at arbitrary positions and sizes.

Create pseudo-elements that are the same size as the entire area of your divs including the box-shadow.
The pseudo-element overlays can be transparent. Then use the :hover state for the pseudo-elements to trigger the tool tip.
Working example:
.glow {
width: 1px;
height: 1px;
background-color: blue;
border-radius: 50%;
box-shadow: 0 0 24px 19px blue;
position: relative;
margin: 2em;
}
.glow:after {
content: "";
display: block;
height: 50px;
width: 50px;
position: absolute;
top: -25px; /* needs to be half of height and width */
left: -25px; /* needs to be half of height and width */
border-radius: 50%;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.glow .tooltiptext {
display: none;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0; /* Position the tooltip */
position: absolute;
z-index: 1;
}
.glow:hover:hover .tooltiptext {
display: block;
}
<div class="glow"><span class="tooltiptext">Tooltip text</span></div>

The box shadow is not part of the box html element and that is why your tooltip is not showing. I would recommend you wrap your box with in a div and use the tooltip on the outer div that also contains your box shadow.
Of course you will have to add padding to the outer div so it will fully contain the box shadow. This way when the user hover on the box shadow, they are actually hovering on top of the outer div and the tooltip will show up. You can use google chrome developing tools (ctrl+shift+i) to see how much padding you will need. Use a: hover or JqueryUI tooltip on the outer div class. Hope this helps!

animate fade fixed back to top button

I have a down link that moves the page down to the next section of the website when the user click. How can i make this fade into a back to top button when the user begins to scroll. Is there also a way of fixing this into position. Guessing this would be done through Jquery but not too sure.
<div class="down-link"><i class="ss-navigatedown"></i></div>
.down-link {
width:100%;
height:50px;
}
#w-downlink i {
line-height: 42px;
font-size: 24px;
color: #fff;
display: block;
width: 24px;
margin: 0 auto;
margin-top:10px;
}
#w-downlink {
height: 60px;
width: 60px;
background-color: #191919;
background-color: rgba(20, 20, 20, 0.4);
position:absolute;
bottom:0;
margin-bottom:30px;
right:0;
margin-right:20px;
cursor: pointer;
-webkit-transform: translate3d(0, 0, 0);
opacity: 1;
}
.w-downlink:hover {
height: 60px;
width: 60px;
background-color: #191919;
background-color: rgba(20, 20, 20, 0.4);
position:absolute;
bottom:0;
margin-bottom:30px;
right:0;
margin-right:20px;
cursor: pointer;
-webkit-transform: translate3d(0, 0, 0);
opacity: 0.5;
}

This should achieve most of what you would like; you don't need jQuery.
There's a button anchored to the top of the page and it changes when you start to scroll; this is simply CSS position: fixed;
The JS simply listens for a scroll event on the window object.
I've just edited it to also change back once the user scrolls back up the page by adding an if(){} statement to check for vertical scrolling.
Instead of just dumping a string into the inner HTML like I've done here, you could dump a different element into the div.
Look into the CSS transitions if you want your element to fade.
You could either change it's class when the scroll event starts, or do it all with javascript.
Here are some resources that may help from the W3C:
onscroll event documentation
css3 Transitions
var downLink = document.getElementById('down-link');
window.addEventListener("scroll", function(){//Provide a window listener
if(window.scrollY){
downLink.innerHTML = "Back to Top";
}else{
downLink.innerHTML = "Down Link";
}
});
#down-link {
position: fixed;
top: 0;
left: 0;
border: 2px solid black /*Just to show the element bounds*/
}
#userScrollElement {
max-height: 500px;
height: 800px;
overflow: auto;
}
<div id="userScrollElement">
<div id="down-link">Down Link
</div>
</div>