Add images into string? Translate word into image

Add images into string? Translate word into image - javascript

I want to create a program that let you input a sentence such as:
I am happy.
And outputs: I am 😊 (happy emoji, in my case an image I've created myself).
So far I am able to replace happy by another word but I need to replace it with an image.
Can I add images to a string?
If so, how?
UPDATE: My code finally works, this is the html and javascript I've used:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Parse emotional expressions with emoticions.</title>
<style>
.inline-img {
height: 40px;
}
</style>
</head>
<body>
<font size="+3" face="Helvetica">
<p id="output"></p>
</font>
<script>
document.addEventListener('DOMContentLoaded', function() {
function word_replace(replacements, str) {
var result = str;
for (var [x, url] of replacements) {
result = result.replace(x, '<img src="' + url + '" alt="emoji" class="inline-img" />');
}
return result;
}
var input = prompt('Input your sentence');
var output = word_replace([
[/(happy)/ig, 'https://c1.staticflickr.com/5/4521/38517798662_418a72e9d9_b.jpg'],
[/(sad|depressed)/ig, 'https://c1.staticflickr.com/5/4553/38517797352_6c8fba1a3d_o.png'],
[/(confused)/ig, "https://c1.staticflickr.com/5/4519/37833334134_109952bda2_b.jpg"],
[/(afraid)/ig, 'https://c1.staticflickr.com/5/4516/37833334324_c43f01a30d_b.jpg'],
[/(angry)/ig, 'https://c1.staticflickr.com/5/4532/26773555349_63894fa4be_b.jpg'],
[/(determined)/ig, 'https://c1.staticflickr.com/5/4537/37833333874_ff92cb8647_b.jpg'],
[/(love)/ig, 'https://c1.staticflickr.com/5/4530/37833331724_8a90312ddb_b.jpg'],
[/(indifferent)/ig, 'https://c1.staticflickr.com/5/4543/37833333744_59da46444d_b.jpg']
], input);
var outputElement = document.getElementById("output");
outputElement.innerHTML = output;
});
</script>
</body>
</html>

If your intention is to simply have the text displayed as HTML somewhere a simple modification to your replacement function will insert a <img> tag to the text.
This way all you need to do is provide a link to your images.
I changed your regex to include parenthesis in order to use the capture groups for the alt text of the <img> tags.
I also used a class to limit the height of the images with css.
function mreplace(replacements, str) {
let result = str;
for (let [x, y] of replacements) {
result = result.replace(x, '<img src="' + y + '" alt="$1" class="inline-img" />');
}
return result;
}
let input = prompt('Input your sentence');
let output = mreplace([
[/(happy)/ig, 'https://icon-icons.com/icons2/860/PNG/512/happy_icon-icons.com_67810.png'],
[/(sad)/ig, 'https://images.vexels.com/media/users/17482/106930/raw/fcba42ccb55e21d86c6cc25078f0431e-cute-and-sad-icon-vector.png'],
[/(confused)/ig, "http://i0.kym-cdn.com/photos/images/original/001/157/196/bcf.gif"]
], input);
$("#input").html(input);
$("#output").html(output);
.inline-img {
height: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input"></div>
<div id="output"></div>

I think you can try to create ico font and use it to replace some words or etc..

/*
* jQuery CSSEmoticons plugin 0.2.9
*
* Copyright (c) 2010 Steve Schwartz (JangoSteve)
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Date: Sun Oct 22 1:00:00 2010 -0500
*/(function(a){a.fn.emoticonize=function(m){var c=a.extend({},a.fn.emoticonize.defaults,m);var d=[")","(","*","[","]","{","}","|","^","<",">","\\","?","+","=","."];var l=[":-)",":o)",":c)",":^)",":-D",":-(",":-9",";-)",":-P",":-p",":-Þ",":-b",":-O",":-/",":-X",":-#",":'(","B-)","8-)",";*(",":-*",":-\\","?-)",": )",": ]","= ]","= )","8 )",": }",": D","8 D","X D","x D","= D",": (",": [",": {","= (","; )","; ]","; D",": P",": p","= P","= p",": b",": Þ",": O","8 O",": /","= /",": S",": #",": X","B )",": |",": \\","= \\",": *",": >",": <"];var j=[":)",":]","=]","=)","8)",":}",":D",":(",":[",":{","=(",";)",";]",";D",":P",":p","=P","=p",":b",":Þ",":O",":/","=/",":S",":#",":X","B)",":|",":\\","=\\",":*",":>",":<"];var h={">:)":{cssClass:"red-emoticon small-emoticon spaced-emoticon"},">;)":{cssClass:"red-emoticon small-emoticon spaced-emoticon"},">:(":{cssClass:"red-emoticon small-emoticon spaced-emoticon"},">: )":{cssClass:"red-emoticon small-emoticon"},">; )":{cssClass:"red-emoticon small-emoticon"},">: (":{cssClass:"red-emoticon small-emoticon"},";(":{cssClass:"red-emoticon spaced-emoticon"},"<3":{cssClass:"pink-emoticon counter-rotated"},O_O:{cssClass:"no-rotate"},o_o:{cssClass:"no-rotate"},"0_o":{cssClass:"no-rotate"},O_o:{cssClass:"no-rotate"},T_T:{cssClass:"no-rotate"},"^_^":{cssClass:"no-rotate"},"O:)":{cssClass:"small-emoticon spaced-emoticon"},"O: )":{cssClass:"small-emoticon"},"8D":{cssClass:"small-emoticon spaced-emoticon"},XD:{cssClass:"small-emoticon spaced-emoticon"},xD:{cssClass:"small-emoticon spaced-emoticon"},"=D":{cssClass:"small-emoticon spaced-emoticon"},"8O":{cssClass:"small-emoticon spaced-emoticon"},"[+=..]":{cssClass:"no-rotate nintendo-controller"}};var f=new RegExp("(\\"+d.join("|\\")+")","g");var n="(^|[\\s\\0])";for(var g=l.length-1;g>=0;--g){l[g]=l[g].replace(f,"\\$1");l[g]=new RegExp(n+"("+l[g]+")","g")}for(var g=j.length-1;g>=0;--g){j[g]=j[g].replace(f,"\\$1");j[g]=new RegExp(n+"("+j[g]+")","g")}for(var k in h){h[k].regexp=k.replace(f,"\\$1");h[k].regexp=new RegExp(n+"("+h[k].regexp+")","g")}var e="span.css-emoticon";if(c.exclude){e+=","+c.exclude}var b=e.split(",");return this.not(e).each(function(){var o=a(this);var i="css-emoticon";if(c.animate){i+=" un-transformed-emoticon animated-emoticon"}for(var p in h){specialCssClass=i+" "+h[p].cssClass;o.html(o.html().replace(h[p].regexp,"$1<span class='"+specialCssClass+"'>$2</span>"))}a(l).each(function(){o.html(o.html().replace(this,"$1<span class='"+i+"'>$2</span>"))});a(j).each(function(){o.html(o.html().replace(this,"$1<span class='"+i+" spaced-emoticon'>$2</span>"))});a.each(b,function(q,r){o.find(a.trim(r)+" span.css-emoticon").each(function(){a(this).replaceWith(a(this).text())})});if(c.animate){setTimeout(function(){a(".un-transformed-emoticon").removeClass("un-transformed-emoticon")},c.delay)}})};a.fn.unemoticonize=function(b){var c=a.extend({},a.fn.emoticonize.defaults,b);return this.each(function(){var d=a(this);d.find("span.css-emoticon").each(function(){var e=a(this);if(c.animate){e.addClass("un-transformed-emoticon");setTimeout(function(){e.replaceWith(e.text())},c.delay)}else{e.replaceWith(e.text())}})})};a.fn.emoticonize.defaults={animate:true,delay:500,exclude:"pre,code,.no-emoticons"}})(jQuery);
$('.comment').emoticonize();
/*
* jQuery CSSEmoticons plugin 0.2.9
*
* Copyright (c) 2010 Steve Schwartz (JangoSteve)
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Date: Sun Oct 22 1:00:00 2010 -0500
*/
/* Basic styles for emoticons */
span.css-emoticon {
font-family: "Trebuchet MS"; /* seems to give the best and most consistent emoticon appearance */
font-size: 0.65em;
font-weight: bold;
color: #000000;
display: inline-block;
overflow: hidden;
vertical-align: middle;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
width: 1.54em; /* note that this is a multiple of this span's font-size, not containing text font-size */
height: 1.54em; /* so, relative to containing text, width and height are 0.9 x 1.6 = 1.44em */
text-align: center;
padding: 0;
line-height: 1.34em;
-moz-border-radius: 1.54em;
-webkit-border-radius: 1.54em;
border-radius: 1.54em;
-moz-box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
-webkit-box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
border: 1px solid rgba(0,0,0,0.25);
background-color: #ffcc00;
background-image: -webkit-gradient(
linear,
right top,
left top,
color-stop(0.41, rgb(255,204,0)),
color-stop(0.56, rgb(255,221,85)),
color-stop(1, rgb(255,238,170))
);
background-image: -moz-linear-gradient(
center right,
rgb(255,204,0) 41%,
rgb(255,221,85) 56%,
rgb(255,238,170) 100%
);
-webkit-transition-property:color, background, transform;
-webkit-transition-duration: 1s, 1s;
-webkit-transition-timing-function: linear, ease-in;
}
/* Styles for two-character emoticons that need more letter-spacing for proportionality */
span.css-emoticon.spaced-emoticon {
padding-left: 0.2em;
width: 1.34em;
letter-spacing: 0.2em;
}
/* This is a dirty dirty hack, because webkit doesn't properly do the padding+width=total-width as it should
I think the width of the border may be throwing things off, because it's more noticable for small icons */
#media screen and (-webkit-min-device-pixel-ratio:0) {
span.css-emoticon.spaced-emoticon {
width: 1.4em;
}
}
/* Styles for emoticons that need to have smaller characters to fit inside the circle */
span.css-emoticon.small-emoticon {
font-size: 0.55em;
width: 1.82em;
height: 1.82em;
line-height: 1.72em;
-moz-border-radius: 1.82em;
-webkit-border-radius: 1.82em;
border-radius: 1.82em;
}
span.css-emoticon.small-emoticon.spaced-emoticon {
padding-left: 0;
width: 1.82em;
letter-spacing: 0.1em;
}
/* Styles for additional colors */
span.css-emoticon.red-emoticon {
background-color: #eb0542;
background-image: -webkit-gradient(
linear,
right top,
left top,
color-stop(0.41, rgb(235,5,66)),
color-stop(0.56, rgb(235,38,90)),
color-stop(1, rgb(250,55,110))
);
background-image: -moz-linear-gradient(
center right,
rgb(235,5,66) 41%,
rgb(235,38,90) 56%,
rgb(250,55,110) 100%
);
}
span.css-emoticon.pink-emoticon {
background-color: #ff8fd4;
background-image: -webkit-gradient(
linear,
right top,
left top,
color-stop(0.41, rgb(255,143,212)),
color-stop(0.56, rgb(255,153,216)),
color-stop(1, rgb(255,173,225))
);
background-image: -moz-linear-gradient(
center right,
rgb(255,143,212) 41%,
rgb(255,153,216) 56%,
rgb(255,173,225) 100%
);
}
/* styles for emoticons that need no rotation, like O_o */
span.css-emoticon.no-rotate {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
font-size: 0.45em;
width: 2.2em;
height: 2.2em;
line-height: 1.9em;
-moz-border-radius: 2.2em;
-webkit-border-radius: 2.2em;
border-radius: 2.2em;
background-image: -webkit-gradient(
linear,
right bottom,
right top,
color-stop(0.41, rgb(255,204,0)),
color-stop(0.56, rgb(255,221,85)),
color-stop(1, rgb(255,238,170))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(255,204,0) 41%,
rgb(255,221,85) 56%,
rgb(255,238,170) 100%
);
}
span.css-emoticon.no-rotate.red-emoticon {
background-image: -webkit-gradient(
linear,
right bottom,
right top,
color-stop(0.41, rgb(235,5,66)),
color-stop(0.56, rgb(235,38,90)),
color-stop(1, rgb(250,55,110))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(235,5,66) 41%,
rgb(235,38,90) 56%,
rgb(250,55,110) 100%
);
}
span.css-emoticon.no-rotate.pink-emoticon {
background-image: -webkit-gradient(
linear,
right bottom,
right top,
color-stop(0.41, rgb(255,143,212)),
color-stop(0.56, rgb(255,153,216)),
color-stop(1, rgb(255,173,225))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(255,143,212) 41%,
rgb(255,153,216) 56%,
rgb(255,173,225) 100%
);
}
/* Styles for emoticons that need to be rotated counter-clockwise, like <3 */
span.css-emoticon.counter-rotated {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-moz-box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
-webkit-box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.41, rgb(255,204,0)),
color-stop(0.56, rgb(255,221,85)),
color-stop(1, rgb(255,238,170))
);
background-image: -moz-linear-gradient(
center left,
rgb(255,204,0) 41%,
rgb(255,221,85) 56%,
rgb(255,238,170) 100%
);
}
span.css-emoticon.counter-rotated.red-emoticon {
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.41, rgb(235,5,66)),
color-stop(0.56, rgb(235,38,90)),
color-stop(1, rgb(250,55,110))
);
background-image: -moz-linear-gradient(
center left,
rgb(235,5,66) 41%,
rgb(235,38,90) 56%,
rgb(250,55,110) 100%
);
}
span.css-emoticon.counter-rotated.pink-emoticon {
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.41, rgb(255,143,212)),
color-stop(0.56, rgb(255,153,216)),
color-stop(1, rgb(255,173,225))
);
background-image: -moz-linear-gradient(
center left,
rgb(255,143,212) 41%,
rgb(255,153,216) 56%,
rgb(255,173,225) 100%
);
}
/* Styles for animated states */
span.css-emoticon.un-transformed-emoticon, span.css-emoticon.animated-emoticon:hover {
/* font-size: inherit;
font-weight: inherit;
vertical-align: inherit;
line-height: inherit;
font-family: inherit; */
letter-spacing: inherit;
color: inherit;
overflow: visible;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
background: none;
background-image: none;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border-color: transparent;
}
span.css-emoticon.nintendo-controller {
font-size: .8em;
height: 1.2em;
line-height: 1em;
width: 2.7em;
vertical-align: bottom;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.09, rgb(116,121,140)),
color-stop(0.55, rgb(165,170,189))
);
background: -moz-linear-gradient(
center bottom,
rgb(116,121,140) 9%,
rgb(165,170,189) 55%
);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="comment">
Hi, this is a great plugin! :-)
</div>
Try this

How about using https://afeld.github.io/emoji-css/
Code example:
function mreplace(replacements, str) {
for (let [x, y] of replacements) {
str = str.replace(x, s => `<i class="em em-${y}"></i>`);
}
return str;
}
let output = document.querySelector('#output');
let input = 'I want to be always happy, but never confused!';
let result = mreplace([
[/happy/ig, 'blush'],
[/confused/ig, "confused"]
], input);
output.innerHTML = result;
console.log(result);
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
<p id="output"></p>

Related

navigation bar turns black

Everytime I try to change the navigation bar, it loads a page and for a split second on top there is a white bar, and then it goes away. How do I get rid of this blackbar
I have put it in below link, you can see it is not working properly, I see differences in also different browser
https://stackblitz.com/edit/web-platform-zgajud?file=index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<!-- <link rel = "stylesheet" href = "navigation.css" type = "text / css" /> -->
</head>
<body>
<!-- <script type="text/javascript">
$.get("navigation.html", function (data) {
$("#nav-placeholder").replaceWith(data);
});
</script> -->
<div id="nav-placeholder">
</div>
<script>
$(function () {
$("#nav-placeholder").load("navigation.html");
});
</script>
<p class="lead">body1</p>
</body>
</html>
navigation.css
.hoverable {
display: inline-block;
/* backface-visibility: hidden; */
vertical-align: middle;
position: relative;
/* box-shadow: 0 0 1px rgba(41, 121, 107, 0.452); */
/* transform: translateZ(0); */
/* transition-duration: 0.3s; */
/* transition-property: transform; */
}
.hoverable:before {
position: absolute;
pointer-events: none;
/* z-index: -1; */
content: "";
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: .6;
/* background: -webkit-radial-gradient(center, ellipse, rgba(167, 58, 58, 0.35) 80%, rgba(54, 138, 46, 0.39) 80%); */
/* background: radial-gradient(ellipse at center, rgba(40, 80, 190, 0.35) 80%, rgba(255, 255, 255, 0) 80%); */
/* W3C */
transition-duration: 0.3s;
/* transition-property: transform, opacity; */
}
.hoverable:hover, .hoverable:active, .hoverable:focus {
transform: translateY(-5px);
/* opacity: .9 !important; */
color: black;
}
.hoverable:hover:before, .hoverable:active:before, .hoverable:focus:before {
/* opacity: 1; */
transform: translateY(0px);
}
#keyframes bounce-animation {
16.65% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
33.3% {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
49.95% {
-webkit-transform: translateY(4px);
transform: translateY(4px);
}
66.6% {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
83.25% {
-webkit-transform: translateY(1px);
transform: translateY(1px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.bounce {
animation-name: bounce-animation;
animation-duration: 2s;
}
/*everything below here is just setting up the page, so dont worry about it */
#media (min-width: 768px) {
.navbar {
text-align: center !important;
float: none;
display: inline-block;
border-color: transparent;
/* border-bottom:2px solid rgba(0,0,0,.5); */
}
}
body {
/* background-color: black; */
font-weight: 600;
text-align: center !important;
/* color: white; */
}
nav {
background: none !important;
/* background-color: transparent; */
text-transform: uppercase;
}
nav li {
margin-left: 3em;
margin-right: 3em;
}
nav li a {
transition: 0s color ease-in-out;
color: black !important;
}
.page-title {
opacity: 1.0 !important;
}
navigation.html
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type = "text / css" />
<link rel = "stylesheet" href = "navigationoriginal.css" type = "text / css" />
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src = "navigation.js"></script>
<div class="container-fluid">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li><a id="len1" class="hoverable" href="index.html">Home</a></li>
<li><a id="len2" class="hoverable" href="body2.html">About</a></li>
<li><a id="len3" class="hoverable" href="#">Portfolio</a></li>
<li><a id="len4" class="hoverable" href="#">Contact</a></li>
</ul>
</div>
</nav>
<!-- <div id="what-the-hell-is-this">
<div class="page-title">
<h2>Simple Navigation</h2>
<p class="lead">
Based on Hover.css, the goal of this pen
is to create a simple navigation bar <br />
that can be easily reused in both mobile and native displays. Mouse over the nav text for animation!
</p>
</div>
</div> -->
</div>

Most likely it's because you're using bootstrap pre-defined CSS elements and then overwriting them when your header loads. Specifically the class navbar-inverse, which paints your nav element black. You don't need this because you're not actually using it.
Other contributions to the flicker: You're loading a bunch of heavy dependencies in navigation.html - those all take some time to download. Not to mention that you're downloading the jQuery library AGAIN in that file (it's already loaded in index.html).
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type = "text / css" />
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Remove these 2 tags from navigation.html and move them to index.html. Then decide which jQuery script you want to use (since you have a different one with a different version already in index.html).
You can leave the navigation.js and navigation.css tags in the navigation.html if you want.

It may be because you styled all nav elements black here:
nav li a {
transition: 0s color ease-in-out;
color: black !important;
}
This would make the children on the nav element black when navigation.html is imported.

How to create an image with gradient where top has opacity 100% and bottom with opacity 0%?

So I have an image (Link to image=> https://i.imgur.com/TRTg8Cu.jpg) that has a gradient below it (background of the body).
Currently, the image has a fade to black gradient, but I want the image to fade to the given gradient.
Basically, a way to have the image go from opacity 100% on top and opacity 0% on the bottom.
// HTML
<div className="h-screen w-full gradient-bg hero-image z-10>
<Image
src={event.name_image.url}
alt={event.Name}
layout="fill"
className="bg-top bg-cover object-cover"
/>
</div>
// CSS
.gradient-bg div {
position: relative;
display: inline-block;
}
.gradient-bg div:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: inline-block;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) 50%,
rgba(0, 0, 0, 1) 100%
);
}
If there is some other way to achieve the same so the image fades to the background, that can also work.
If there is a JS/React library which can help me achieve this, that may also work.
PS. background in my project is dynamic (gradient colors change every few seconds)

This is the purpose of mask:
.gradient-bg {
background: linear-gradient(to right, red, blue);
display:inline-block;
}
.gradient-bg img {
-webkit-mask: linear-gradient(white 50%, transparent);
display:block;
}
<div class="gradient-bg">
<img src="https://picsum.photos/id/1/400/300">
</div>

How can I skew a scrollbar?

::-webkit-scrollbar-thumb {
-webkit-transform: skewX(15deg);
-moz-transform: skewX(15deg);
transform: skewX(15deg);
}
I've realised that I cannot simply assign a transform via css so I was wondering if there is any other way to achieve a skew-like effect on my scrollbar to match other elements of the site.
Here is an example of my main menu highlighting with a 15deg skew transform. I'm looking to create the same effect but on a vertical scrollbar:
Could this possibly be achieved with a pseudo element or background image?

Multiple background can do this.
I considered 45deg to better see the result but you can adjust the angle like you want:
body {
width:300vw;
}
::-webkit-scrollbar {
width: 1em;
height:1em;
}
::-webkit-scrollbar-thumb {
background:
linear-gradient( 45deg, transparent 10px,orange 0) left, /* 45deg */
linear-gradient(-135deg,transparent 10px,orange 0) right; /* 45deg - 180deg */
background-size:51% 100%;
background-repeat:no-repeat;
}
some text
Another idea to make it works on both scrollbar but with no transparency
body {
width:300vw;
height:300vh;
}
::-webkit-scrollbar {
width: 1em;
height:1em;
}
::-webkit-scrollbar-thumb {
background:
linear-gradient(to top right, #fff 49%,transparent 50%) bottom left,
linear-gradient(to bottom left , #fff 49%,transparent 50%) top right,
orange;
background-size:1em 1em;
background-repeat:no-repeat;
}
some text

CSS Shimmer effect with blocking JavaScript

I have a shimmer React component with the following CSS
background: #ebebeb;
background-image: linear-gradient(to right, #ebebeb 0%, #c5c5c5 20%, #ebebeb 40%, #ebebeb 100%);
and the animation keyframe I apply to it is as follows:
{
0%: { background-position: -468px 0 };
100%: { background-position: 468px 0 };
}
My home page is quite heavy on mount. So the animation freezes for about a second or so.
I read that animating transition is done off-thread https://www.phpied.com/css-animations-off-the-ui-thread/
Can anyone help me do my shimmer effect in a similar off-thread manner?

Use transform as suggested in the link. Here is an idea with pseudo element:
.box {
background-image: linear-gradient(to right, #ebebeb calc(50% - 100px), #c5c5c5 50%, #ebebeb calc(50% + 100px));
background-size:0;
height: 200px;
position:relative;
overflow:hidden;
}
.box::before {
content:"";
position:absolute;
top:0;
right:0;
width:calc(200% + 200px);
bottom:0;
background-image:inherit;
animation:move 2s linear infinite;
}
#keyframes move{
to {
transform:translateX(calc(50% + 100px));
}
}
<div class="box">
</div>

Efficient way to manipulate DOM childs

My goal is to get a randomized shine effect on certain text using CSS animation.
I already have a working code, just want to know if there a more effective/simple solution.
HTML:
<span class="foo">
<span class="bar">
</span>
</span>
CSS:
#keyframes masked-animation {
0% {background-position: -1000px 0}
50% {background-position: 1000px 0}
100% {background-position: 1000px 0}
}
.foo{
text-align: center;
font-size: 40px;
font-weight: bold;
display: block;
color: red;
position: absolute;
}
.bar{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
color: rgba(0,0,0,0);
background-image: linear-gradient(-45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.67) 48%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.67) 52%, rgba(255,255,255,0) 100%);
background-repeat: no-repeat;
-webkit-background-clip: text;
animation-name: masked-animation;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
background-size: 400% 100%;
}
JS:
$('.foo')[0].childNodes[0].nodeValue = "Text";
$('.foo > .bar').css({
"animation-duration" : 8 + Math.round(Math.random()*40)/10 + "s",
"animation-delay" : Math.round(Math.random()*100)/10 + "s"
}).text("Text");
In order for the animation to look properly, it needs to be above the element/text. Having it on the same element will render it behind.
I tried using ::before but I can't select it with JS since it doesn't actually exist in the DOM.
This needs to be applied to multiple elements and text inside <span> changes every so often.
JSFiddle

An alternative may be to create and directly manipulate a style sheet in javascript. In this way, iterating over the elements is handled by the browser rather than in javascript.
Setting up such a stylesheet is described in MDN's CSSStyleSheet.insertRule() examples.
There is also a jQuery library for these kind of manipulations.
And a working example:
var styleElement = document.createElement('style');
document.head.appendChild(styleElement);
var styleSheet = styleElement.sheet,
ruleIdx = styleSheet.insertRule('.target{}',styleSheet.cssRules.length),
rule = styleSheet.cssRules[ruleIdx],
colorize = function() {
var color = Math.random() * 360;
rule.style.color = 'hsl('+color+',100%,50%)';
},
interval = setInterval(colorize,1000);
colorize();
<div class="target" style="font-size:5em;font-weight:bold;font-family:sans-serif">TEST</div>

Develop Reference

JavaScript is the programming language of the Web.

Add images into string? Translate word into image - javascript

I think you can try to create ico font and use it to replace some words or etc..

Related

navigation bar turns black

How to create an image with gradient where top has opacity 100% and bottom with opacity 0%?

How can I skew a scrollbar?

CSS Shimmer effect with blocking JavaScript

Efficient way to manipulate DOM childs

Categories

Resources