import { useEffect, useState } from 'react'
const useLazyImage = (src: string): useLazyImageProps => {
const [sourceLoaded, setSourceLoaded] = useState<string | null>(
null,
)
const [loading, setLoading] = useState<boolean>(true)
useEffect(() => {
const img = new Image()
img.src = src
img.onload = () => {
setLoading(false)
setSourceLoaded(src)
}
return () => {
img.remove()
}
}, [src])
return {
loading,
src: sourceLoaded,
}
}
interface useLazyImageProps {
loading: boolean
src: null | string
}
export default useLazyImage
Month: January 2021
CSS text shine effect
.textShineBlack {
background: linear-gradient(to right, #373b3d 50%, #fff 70%, #f2e7e0 30%, #000 80%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
background-size: 200% auto;
animation: textShine 7s ease-in-out infinite alternate;
padding-right: 15px;
}
@keyframes textShine {
to {
background-position: 200%;
}
}
Change image URL with new image URL with jQuery
jQuery(document).ready(function( $ ){
$('.logo img').each(function () {
var curSrc = $(this).attr('src');
if ( curSrc === 'http://web.headcasemedia.co.uk/wp-content/themes/saasweb/images/logo-2.png' ) {
$(this).attr('src', 'http://web.headcasemedia.co.uk/wp-content/uploads/2021/01/HeadcadeWeb-logo-01.png');
}
});
});
Elementor show hide section toggle
Add this script to the section
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.showme').click(function(){
$(this).closest('.elementor-section').next().slideToggle();
$(this).toggleClass('opened');
});
$('.closebutton').click(function(){
$(this).closest('.elementor-section').prev().find('.showme').click();
});
});
});
</script>
<style>
.showme a , .showme i , .showme img, .closebutton a, .closebutton i, .closebutton img{
cursor: pointer;
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}
.opened i , .opened img , .opened svg{
transform: rotate(90deg);
}
</style>
Creat an icon, imge, button above the section and give class name – showme – ( icon link must be empty ). If you want a close button in one of the expanded section, simply give it the class ‘ closebutton ‘.
Finally make the section hide from all devices from responsive section.
Elementor read more toggle button
Add class readmoretoggle
body:not(.elementor-editor-active) .readmoretoggle .elementor-tab-title.elementor-active{
display: none;
}
body:not(.elementor-editor-active) .readmoretoggle .elementor-tab-title.elementor-active{
display: none;
}
.readmoretoggle .elementor-toggle .elementor-tab-title {
display: flex;
justify-content: center;
}
body:not(.elementor-editor-active) .readmoretoggle .elementor-tab-title.elementor-active{
display: none;
}
/* button styling below */
.readmoretoggle .elementor-tab-title a{
display:inline-block;
padding:0.4em 1.6em;
margin:0.14em 0 ;
border:0.16em solid rgba(0,0,0,0);
border-radius:2em;
font-weight:300;
color:rgba(255,255,255,0.9); /* button text color */
text-align:center;
background-color: rgba(0,0,0,.71); /* button color */
transition: all 0.34s ease;
}
/* hover button styling */
.readmoretoggle .elementor-tab-title a:hover{
color:rgba(255,255,255,1); /* change color of text when hovering */
transform: scale(1.03); /* delete to remove the zoom in effect */
}
.readmoretoggle .elementor-tab-title.elementor-active::before {
content: 'Read Less';
font-family:roboto;
font-weight: 400;
font-size: 16px;
color: #000000;
}
.readmoretoggle .elementor-toggle-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column-reverse;
}
.readmoretoggle .elementor-tab-title.elementor-active a{
display:none;
}
body:not(.elementor-editor-active) .readmoretoggle .elementor-tab-title.elementor-active {
display: block !important;
}
body:not(.elementor-editor-active) .readmoretoggle .elementor-tab-title.elementor-active {
display: flex;
justify-content: center;
}
#elementor-tab-title-1611 {
text-align: center;
}
Css landscape media query
/* Landscape */
@media screen and (orientation:landscape)
and (min-device-width: 479px)
and (max-device-width: 668px) {
// code goes here ...
}
CSS Texts slide transition hover effect.
.portfolio-sec .work-navigation a:hover {
-webkit-transition: all 0.8s cubic-bezier(0, 0, 0.23, 1);
transition: all 0.8s cubic-bezier(0, 0, 0.23, 1);
background-position: 0%;
}
.portfolio-sec .work-navigation a {
text-decoration: none;
display: block;
transition: .8s ease;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: -webkit-gradient(linear, left top, right top, from(#ec3737), color-stop(50%, #ec3737), color-stop(50%, #000000));
background-image: linear-gradient(to right, #ec3737, #ec3737 50%, #000000 50%);
background-size: 200% 100%;
background-position: 100%;
}
If advanced custom field not installed.
<?php if( class_exists('ACF') ) : ?>
<img src="<?php the_field('hero_image'); ?>" alt="slider-img"/>
<?php endif; ?>
Instagram and IMDB social icons color
.elementor-social-icon-instagram { width:40px; height:40px;
background: #f09433;
background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
}
.elementor-repeater-item-c46dde7 {
background: #E2B635;
}
Imdb svg logo: