@Richard-Keith said in paralax is not working after update:
542
Hi richard
Thank you for looking into it and for suggesting a solution!
I have tried changing the code as you suggested, unfortunately the paralax is still noget working on this page: http://www.re-form.dk/reform2018
Any other suggestions is greatly appreciated!
Thx
Jens
Sure thing.
This is all placed in "Custom <head> content":
<meta property="og:image" content="http://www.re-form.dk/wp-content/uploads/2017/10/FB--cover--02.png" />
<script src="http://re-form.dk/blotter/js/blotter.min.js"></script>
<script src="http://re-form.dk/blotter/js/materials/liquidDistortMaterial.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
if(type == "page" && obj.id == 582) {
const createBlotterGeneratorText = () => {
// Define text style
const text = new Blotter.Text('RE', {
family: "'reform_mmxx-4', serif",
size: 500,
paddingLeft: 100,
paddingRight: 100
});
// Use a material
// https://blotter.js.org/#/materials
let material = new Blotter.LiquidDistortMaterial();
// Set material opts
material.uniforms.uSpeed.value = 0.2;
material.uniforms.uVolatility.value = 0.5;
material.uniforms.uSeed.value = 0.1;
let blotter = new Blotter(material, {
texts: text
});
// Apply to element
let scope = blotter.forText(text);
let elem = document.getElementById('blotter-container');
scope.appendTo(elem);
};
WebFont.load({
custom: {
families: ['reform_mmxx-4'],
urls: ['http://www.http://www.re-form.dk/wp-content/uploads/2020/02/reform_mmxx-4.woff']
},
active: () => createBlotterGeneratorText()
});
}
});
</script>
<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
if(type == "page" && obj.id == 576, 568) {
const body = document.body;
const docEl = document.documentElement;
const MathUtils = {
lineEq: (y2, y1, x2, x1, currentVal) => {
// y = mx + b
var m = (y2 - y1) / (x2 - x1), b = y1 - m * x1;
return m * currentVal + b;
},
lerp: (a, b, n) => (1 - n) * a + n * b,
distance: (x1, x2, y1, y2) => {
var a = x1 - x2;
var b = y1 - y2;
return Math.hypot(a,b);
}
};
let winsize;
const calcWinsize = () => winsize = {width: window.innerWidth, height: window.innerHeight};
calcWinsize();
window.addEventListener('resize', calcWinsize);
const getMousePos = (ev) => {
let posx = 0;
let posy = 0;
if (!ev) ev = window.event;
if (ev.pageX || ev.pageY) {
posx = ev.pageX;
posy = ev.pageY;
}
else if (ev.clientX || ev.clientY) {
posx = ev.clientX + body.scrollLeft + docEl.scrollLeft;
posy = ev.clientY + body.scrollTop + docEl.scrollTop;
}
return {x: posx, y: posy};
}
let mousePos = {x: winsize.width/2, y: winsize.height/2};
window.addEventListener('mousemove', ev => mousePos = getMousePos(ev));
const elem = document.querySelector('.content__text');
const textEl = elem.querySelector('span.content__text-inner');
const createBlotterText = () => {
const text = new Blotter.Text(textEl.innerHTML, {
family : "'reform_mmxx-3', serif",
weight: 500,
size: 500,
paddingLeft: 20,
paddingRight: 20,
paddingTop: 200,
paddingBottom: 20,
fill : 'black',
});
elem.removeChild(textEl);
const material = new Blotter.LiquidDistortMaterial();
material.uniforms.uSpeed.value = 1;
material.uniforms.uVolatility.value = 1;
material.uniforms.uSeed.value = 0.1;
const blotter = new Blotter(material, {texts: text});
const scope = blotter.forText(text);
scope.appendTo(elem);
let lastMousePosition = {x: winsize.width/2, y: winsize.height/2};
let volatility = 0;
const render = () => {
const docScrolls = {left : body.scrollLeft + docEl.scrollLeft, top : body.scrollTop + docEl.scrollTop};
const relmousepos = {x : mousePos.x - docScrolls.left, y : mousePos.y - docScrolls.top };
const mouseDistance = MathUtils.distance(lastMousePosition.x, relmousepos.x, lastMousePosition.y, relmousepos.y);
volatility = MathUtils.lerp(volatility, Math.min(MathUtils.lineEq(0.9, 0, 50, 0, mouseDistance),0.9), 0.05);
material.uniforms.uVolatility.value = volatility;
lastMousePosition = {x: relmousepos.x, y: relmousepos.y};
requestAnimationFrame(render);
}
requestAnimationFrame(render);
};
WebFont.load({
custom: {
families: ['reform_mmxx-3'],
urls: ['http://www.re-form.dk/wp-content/uploads/2019/12/reform_mmxx-3.woff']
},
active: () => createBlotterText()
});
}
});
</script>
Many thanks for your time and help!
Hi Richard
Thanks for your reply!!
Yes I do have custom Javascript added relating to a 'reform.woff' font – the custom java is only used on this page: http://www.re-form.dk/2020_open_call
And yes, the Lay Theme Carousel addon (the only one I am using) is up to date.
Any suggestions for what I can do? I think it is very strange that it is working on one page and not another...
Thanks again!
Best, Jens
Hi
I just updated my site to the latest version of laytheme (Version: 3.5.4) and wordpress (5.5.3).
After the update simple parallax is not working on this page any longer: http://www.re-form.dk/reform2018
But is is still working on this page: http://www.re-form.dk/2020_open_call
Is there any way to make sure it works on all pages?
"Activate Simple Parallax" is checked in "Lay Options".
I experience the issue in both chrome and safari.
Thank you for your time and help!
Best, Jens
Thank you for your reply @mariusjopen
It's amazing that you always take you time your time to answer so many questions!!! Thank you SO much.
I will look for a solution and post it here when I find it.
Thanks again
J
Hi
First of all thank you for all your amazing work with this theme!
I am making a dual-language website (Danish and English) where I am using qTranslate-XT. When I set the frontpage of the website it automatically sets the English version as the primary language –resulting in www.sitename.dk/en to be the front page. I want the primary language of the landing page to be Danish (www.sitename.dk/) but can't figure out how to change this.
These are my language settings (Languages > General > Default Language / Order:)
And this it what the dropdown looks like in Custumize > Front page > Choose a Page
This is the url: http://charlottehummervad.dk/ (and I use google chrome)
Really hope you can help with this!!!
Thank you once again
Best, J
Doh! Missed that.
Thx!
Hi
I would like to set the frame top in % and not in px.
Under "Desktop Gridder Defaults" (under Lay Options > Gridder Defaults) my settings looks like this:
As you can see "Frame top in" is set to %, but in the gridder it looks like this:
As you can see "Top Frame" is in px and not in %
A fix for this would be much appreciated. Thanks! And thanks for all your work and help!
Best, Jens
@arminunruh Thanks for the repsonse!
I have figured out the issue: the font used for the script was .woff2, and that was not loaded correctly in firefox. When I use .woff it works.
I will look into the script issue that you mention!
Thanks again!
Hi, thank you for all your great work on this theme!
I am having trouble getting a javascript to work/load/fire in Firefox ... it works fine i Safari and Chrome. But when the page is loaded in Firefox nothing happens:
http://www.re-form.dk/2020-generator
The script I am using/modifying is this: https://tympanus.net/Development/TextDistortionEffects/index2.html
which works in Firefox, so I am assuming that it has something to do with the way the script is loaded in laytheme...
Any help would be greatly appreciated!
Thanks again!
Jens
Hi @mariusjopen
Thank you for your reply! I have now managed to make it work –> http://www.re-form.dk/2020-open-call-03
However I am having trouble getting the script to fire in firefox (works fine i safari and chrome). Do you have any idea what might be the issue? And any suggestions for solutions?
The script I am using/modifying is this: https://tympanus.net/Development/TextDistortionEffects/index2.html
And that seems to be working in Firefox...
Thanks again!
Jens
Hi
Is it possible to add and use blotter.js with laytheme?
I am trying to implement a distortion effect like this (only the text layer) -> https://tympanus.net/Development/TextDistortionEffects/index2.html
Will it be possible using blotter.js? Or would you recommend something different than blotter.js?
Thank you for your help!
Best, Jens
@jensdan I found out it worked as soon as I made a custom phone layout and added the slideUp class.
I found this useful post about fading in elements: fade in elements on scroll like on http://meireundmeire.com/category/selected-projects/
However it does not work on mobile – is there a way to make it work? Like on e.g. http://meireundmeire.com
Any input on this would be much appreciated.
THX!
As I only want it to slide in images I have changed the js script and added the .slideUp class to images in the gridder.
javascript:
<script>
var $items;
var doScroll = function(){
$items.each(function(ix){
var rect = this.getBoundingClientRect();
//above viewport
if(rect.top+rect.height < 0){
jQuery(this).addClass("above").removeClass('below transition-in');
}
//below viewport
else if(rect.top > window.innerHeight){
jQuery(this).addClass("below").removeClass('above transition-in');
}
// in viewport
else{
jQuery(this).removeClass('above below').addClass("transition-in");
}
});
};
window.laytheme.on("newpageshown", function(){
setTimeout(function(){
$items = jQuery(".slideUp");
},0);
});
jQuery(window).on('scroll', doScroll);
</script>
CSS
.slideUp.above{
transform: translateY(-200px);
opacity: 0;
}
.slideUp.below{
transform: translateY(200px);
opacity: 0;
}
.slideUp.transition-in{
transform: translateY(0);
opacity: 1;
}
.slideUp{
transition: transform 0.5s cubic-bezier(0.165, .84, .44, 1), opacity 0.5s cubic-bezier(0.165, .84, .44, 1);
}
Hi Marius
Thank you for your answer! I am working locally via mamp, so I don't think it is possible to share my tryouts. But any ideas and inputs would be great! Thanks
I have http://scrollmagic.io but can't make it work. Do you know if it is possible to use scroll magic with Lay theme?
I have also tried using various javascripts. E.g. this where I tried using an element in the main-region as a trigger to add a class to the main-region (but I can't make it work like I want to).
<script>
jQuery(document).ready(function($) {
function sticky()
{
var window_top=$(window).scrollTop();
var top_position=$('#sticky-trigger').offset().top;
var element_to_stick=$('#main-region');
if (window_top > top_position) {
element_to_stick.addClass('main-region-sticky');
} else {
element_to_stick.removeClass('main-region-sticky');
}
}
$(window).scroll(sticky);
sticky();
});
</script>
And then adding this CSS:
#main-region.main-region-sticky {
position: fixed;
bottom: 0;
}
Hi
Thank you for all your great work on this theme!
I am trying to add/remove a class to the main-region as soon as the the footer-region enters/leaves the viewport. Preferably I would like the main-region to stick to the bottom of the viewport and have the footer-region "slide over" the main-region (e.g. by giving it a class with lover z-index and position fixed to the bottom). I have tried various javascript solutions but have been unable to find any that work.
Any input and suggestions on how/if this is a achievable would is much appreciated!
Thx! Jens
@mariusjopen Great! Thx Marius!
Hi
Thanks for all your work on this great theme!
I am working on a site using the carousel addon. There seems to be a bug when adding links to the captions of images and projects in the carousel. When editing the text in "Edit Carousel > Edit Caption" the "insert/edit link" button simply does not work – it is clickable, but nothing happens when clicking it.
I am working locally via MAMP and using Google Chrome ("insert/edit link" button works when I insert links in text boxes).
Hope you can fix this. Thanks!