We Keep Coding

Why circles build by CircleType need two reload to work?

CircleType issue.
Hello everyone,
I'm trying to make a circle with the CircleType library but it doesn't work on the first page load. In order for the circle work and take the desired size I need to reload my page twice (see images). I have already tried changing the radius, font size, script order... If anyone knows how to solve it or has an idea I'd love to hear it.
After two refresh
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/circletype.min.js">
<script type="text/javascript">
const circleType = new CircleType(
document.getElementById("rotated")
);
$(window).scroll(function() {
var offset = $(window).scrollTop();
offset = offset * 0.4;
$(".circular-text").css({
"-moz-transform": "rotate(" + offset + "deg)",
"-webkit-transform": "rotate(" + offset + "deg)",
"-o-transform": "rotate(" + offset + "deg)",
"-ms-transform": "rotate(" + offset + "deg)",
transform: "rotate(" + offset + "deg)",
});
});
</script>
UPDATE
I've tried this
<script type="text/javascript">
function cercle() {
const circleType = new CircleType(
document.getElementById("rotated"));
}
$( window ).on( "load", cercle);
// $(window).scroll(function() {
// var offset = $(window).scrollTop();
// offset = offset * 0.4;
// $(".circular-text").css({
// "-moz-transform": "rotate(" + offset + "deg)",
// "-webkit-transform": "rotate(" + offset + "deg)",
// "-o-transform": "rotate(" + offset + "deg)",
// "-ms-transform": "rotate(" + offset + "deg)",
// transform: "rotate(" + offset + "deg)",
// });
// });
</script>
The result at the first load
Second Load
Code HTML CSS JS
https://codepen.io/adrian-jamet/pen/mdMBMZE

How to use .animate javascript in Safari ? Getting undefined is not a function

I'm trying to animate multiples leafs randomly. Here's my code :
var leafs = document.querySelectorAll(".leaf");
leafs.forEach(function(leaf) {
var angle = parseInt(leaf.getAttribute("data-angle")),
posY = parseInt(leaf.getAttribute("data-top")),
posX = parseInt(leaf.getAttribute("data-left")),
directionX = Math.random() < 0.5 ? -1 : 1,
directionY = Math.random() < 0.5 ? -1 : 1,
newposX = directionX * Math.round(Math.random()*10) + posX,
newposY = directionY * Math.round(Math.random()*10) + posY,
angleRotation = Math.round(Math.random()*20) + angle;
//keyframe = {transform: ['translate3d(' + posX + 'px,' + posY + 'px, 0px) rotate(' + angle + 'deg)', 'translate3d(' + newposX + ',' + newposY + ', 0px) rotate(' + angleRotation + ')']};
console.log(leaf);
leaf.animate([
{
transform: 'translate3d(' + posX + 'px,' + posY + 'px, 0px) rotate(' + angle + 'deg) '
},
{
transform: 'translate3d(' + newposX + 'px,' + newposY + 'px, 0px) rotate(' + angleRotation + 'deg)'
}
], {
iterations: Infinity,
direction: 'alternate',
easing: 'ease-in-out',
duration: 3000
});
});
In firefox & chrome it's working fine. In safari I got the following error I don't know how to deal with it. I'm using vanilla javascript.
TypeError: undefined is not a function (near '...leaf.animate...')
UPDATE
Turns out I either need a polyfill or Jquery.
PolyFill can be found here : web-animations-js

Check out web-animations-js, the w3 polyfill provided by Google. It's a bit dated but works for most Web Animations API features on at least the top 99% of browsers.

onmousemove event not working

I'm learning to use onmousemove event but can't make it work, the idea is to tilt a bit an image to create an effect like it's following the mouse a kind of parallax I guess. this is what I want to achieve:
https://tympanus.net/Development/PhotographyWebsiteConcept/#
and this is the code:
<div class="container-fluid" >
<div class="row" onmousemove="myFunction(event)">
<div class="col-sm-12" >
<div class="hero" id="myDIV">
<div class="hero__back hero__back--static"></div>
<div class="hero__back hero__back--mover" id="move" style="transform: perspective(1000px) translate3d(-3.08931px, 9.6px, 48px) rotate3d(-0.96, -0.308931, 0, 2deg);"></div>
<div class="hero__front"></div>
</div>
</div>
</div>
</div>
this is JS:
<script>
function myFunction(e) {
var xVal = -1/(win.height/2)*e.clientY + 1;
var yVal = 1/(win.width/2)*e.clientX - 1;
var transX = 20/(win.width)*e.clientX - 10;
var transY = 20/(win.height)*e.clientY - 10;
var transZ = 100/(win.height)*e.clientY - 50;
var coor = "Coordinates: (" + x + "," + y + ")";
document.getElementById("move").style.transform = 'perspective(1000px) translate3d(' + transX + 'px,' + transY + 'px,' + transZ + 'px) rotate3d(' + xVal + ',' + yVal + ',0,2deg)';
document.getElementById("move").style.WebkitTransform = 'perspective(1000px) translate3d(' + transX + 'px,' + transY + 'px,' + transZ + 'px) rotate3d(' + xVal + ',' + yVal + ',0,2deg)';
}
</script>

I think is because the div of class row has no height, you can use inspector to check the height of that div. You can try add the onmousemove function to another div, which has the full height of your image.

Changing page scale via javascript

I wish to scale the body of my website acording to resolution, but the code not seems to work:
document.body.style.transform: scale(window.screen.availHeight/2);
document.body.style['-o-transform'] = window.screen.availHeight/2;
document.body.style['-webkit-transform'] = window.screen.availHeight/2;
document.body.style['-moz-transform'] = window.screen.availHeight/2;

Try
document.body.style.transform = 'scale(' + window.screen.availHeight/2 + ')';
document.body.style['-o-transform'] = 'scale(' + window.screen.availHeight/2 + ')';
document.body.style['-webkit-transform'] = 'scale(' + window.screen.availHeight/2 + ')';
document.body.style['-moz-transform'] = 'scale(' + window.screen.availHeight/2 + ')';

Use jQuery set .css RIGHT if #foo + offset left is greater than page width

Ok, so I am trying to use jQuery to get the innerWidth() of an element #preview. I want to create a conditional that says IF x offset LEFT + #preview width is greater than page width, give it style right: z where z = #preview width + xOffset.
I apologize my code below is a mess and the syntax for .css ("right", (rightFloat + xOffset) + "px") (line 125) is off, but that's part of my problem.
<script>
$(document).ready(function(){
//append "gallery" class to all items with "popup" class
imagePreview();
$(".popup").addClass("gallery");
});
//The overlay or pop-up effect
this.imagePreview = function() { /* CONFIG */
xOffset = 40;
yOffset = 40;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.preview").click(function(e) {
return false;
});
$("a.preview").hover(function(e) {
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
var rightFloat = e.pageX + ("#preview").innerWidth;
$("body").append("<p id='preview'><img src='" + this.href + "' alt='Image preview' />" + c + "</p>");
$("#preview").hide().css("top", (e.pageY - yOffset) + "px").css("left", (e.pageX + xOffset) + "px").fadeIn("2000");
while ((left + 400) > window.innerWidth) {.css("right", (rightFloat + xOffset) + "px")
}
}, function() {
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function(e) {
var top = e.pageY - yOffset;
var left = e.pageX + xOffset;
var rightFloat = e.pageX + ("#preview").innerWidth;
//flips the image if it gets too close to the right side
while ((left + 400) > window.innerWidth) {.css("right", +(rightFlaot + xOffset) + "px")
}
$("#preview").css("top", top + "px").css("left", left + "px");
});
};
</script>

Try using http://api.jquery.com/offset/
if($('#preview').offset().right<0){
var right = parseInt($(window).width()) - e.pageX + xOffset;
$("#preview").css("top", top + "px").css("right", right + "px");
}else{
var left = e.pageX + xOffset;
$("#preview").css("top", top + "px").css("left", left + "px");
}
I made these fixes because I couldn't get your code to work in jsfiddle:
var xOffset = 40;
var yOffset = 40;
$("a.preview").bind('mouseover',function(e){
var rightFloat = parseFloat(e.pageX)+$("#preview").innerWidth();
var ptop = parseFloat(e.pageY) - yOffset;
var pleft = parseFloat(e.pageX) + xOffset;
$("#preview").css({"top":ptop + "px","left":pleft + "px"});
});
There's the fixes for the top half but I have no idea what you're trying to do with the bottom part (with the while loop). Can you explain what functionality you want?