Comments (8)
@calebarchie Please see the fiddle with link below. You will need to create a variable to store the typewriter instance. That way when mouse enters, you can create the instance and assign the it to the variable. Then once mouse leaves, you can stop the typewriter animation and clear the variable and contents.
https://jsfiddle.net/yp32rosa/
from typewriterjs.
Hi, I think I understand however I am having a little difficulty working it into the project with my limited knowledge.
Basically, I'd like the typewriter to function normally on load then on mouseover (on a logo next to typewriter div) write a string THEN on mouseout restart the original typewriter function on load. It is just a contact button, see website here:
https://www.thecontainerlab.com/
p/w = arcifa
I think my problems stem from the process to clear the variable:
typewriterElement.innerHTML = '' "
Whereas I'd like to to restart, I have modified it so that is will function but it just keeps creating extra divs on each event. I think what I need is an event to remove div then make new one. Sorry these dynamic divs are new to me and confusing.
from typewriterjs.
@calebarchie Please look at the fiddle link below and let me know if that helps you.
https://jsfiddle.net/cxvugsry/
from typewriterjs.
Thanks! I think that is something I can work with, this is as far as I got with the other code:
https://www.dropbox.com/s/jv0n2oyevxigqxw/the-container-lab.zip?dl=0
I'll have a fiddle with the new one and let you know how I go.
from typewriterjs.
OK I got it working however something with the fiddle I noticed the originalTypewriter won't actually loop in the fiddle despite being set to loop?
It would be good to combine the one I posted and the fiddle eg; rather than just hide/show those two typewriters, fire originalTypewriter from first string on mouseout instead. I really do need to learn JS properly at some point.
Thanks again!
from typewriterjs.
@calebarchie np, good to hear.
from typewriterjs.
OK I must be going mad as I seem to be going in circles. The pause() does not seem to work for me? Only works if I change it to a stop() which is not really what I'm after.
Could this be because, for some reason I am using the first version of the script?
from typewriterjs.
Updated to latest version, working fine. Can't see how to change cursor blink speed and keep write/delete speed speed the same like in V1.
from typewriterjs.
Related Issues (20)
- Bug when deleting chars in subsequent run, even on the main site HOT 3
- How long is the time interval between letters when the delay option is set to 0? HOT 1
- TypewriterJS not working in a next.js app router HOT 1
- Typo HOT 2
- Add `map` files HOT 1
- Typewriter paused when tab/window is not active HOT 1
- Feature Request: Method to ClearAll immediately. HOT 7
- Can I attach a css class to it? When I add a class to the parent element to set a custom font, it doesn't work. HOT 1
- Issue with iPhone & RTL HOT 2
- Can i change de delay value meanwhile the effect is active?
- [Feature request] Add option to skip typing certain tags
- Font Size for style wrapper not working
- TypeScript: Type Error when injecting graphemeSplitter on stringSplitter `option` as per the documented demo
- Doesnt work with emojis HOT 1
- Why does it delete the text??
- Feature Request - Add Option for Wrapper to Get Height of Fully Typed Content
- Safari does not connect scripts / apply opentype font features / kerning to text created with createTextNode HOT 1
- CDN version is broken
- How to completely stop the typing using React
- How to display initial text?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from typewriterjs.