This animation code is killing me! CSS3?

[Nelius]

This guy has this typing animation that, for the life of me, I cannot figure out!

 

I did all kinds of web inspection on his site for hours and the closest thing i found out is that it something to do with "@keyframes", "-moz" & "-webkit"

 

https://www.isaumya.com/

 

I sent him a email, but he says that he is against "free help"  :wacko: ... so whatever. I'm sure the people here are okay with spreading a little bit of knowledge so one day I can do the same.

 

 

[Hazy125]

He has a class under the span containing the actual text called typed-cursor. This is part of the typed.js Jquery plugin

 

Typed.js website: http://www.mattboldt.com/demos/typed-js/

 

Further down the page you will see some keyframes for the animated blinking cursor which is what I assume the guy was talking about.

 

Here's the JS code as well just because, bit harder to find. You had to inspect element on one of his JS files and search for "engineer" or some other thing

that gets typed. Also, he violates almost all the licensing agreements good god

(jQuery);;! function(a) {    "use strict";    var b = function(b, c) {        this.el = a(b), this.options = a.extend({}, a.fn.typed.defaults, c), this.isInput = this.el.is("input"), this.attr = this.options.attr, this.showCursor = this.isInput ? !1 : this.options.showCursor, this.elContent = this.attr ? this.el.attr(this.attr) : this.el.text(), this.contentType = this.options.contentType, this.typeSpeed = this.options.typeSpeed, this.startDelay = this.options.startDelay, this.backSpeed = this.options.backSpeed, this.backDelay = this.options.backDelay, this.stringsElement = this.options.stringsElement, this.strings = this.options.strings, this.strPos = 0, this.arrayPos = 0, this.stopNum = 0, this.loop = this.options.loop, this.loopCount = this.options.loopCount, this.curLoop = 0, this.stop = !1, this.cursorChar = this.options.cursorChar, this.shuffle = this.options.shuffle, this.sequence = [], this.build()    };    b.prototype = {        constructor: b,        init: function() {            var a = this;            a.timeout = setTimeout(function() {                for (var b = 0; b < a.strings.length; ++b) a.sequence[b] = b;                a.shuffle && (a.sequence = a.shuffleArray(a.sequence)), a.typewrite(a.strings[a.sequence[a.arrayPos]], a.strPos)            }, a.startDelay)        },        build: function() {            var b = this;            if (this.showCursor === !0 && (this.cursor = a('<span class="typed-cursor">' + this.cursorChar + "</span>"), this.el.after(this.cursor)), this.stringsElement) {                b.strings = [], this.stringsElement.hide();                var c = this.stringsElement.find("p");                a.each(c, function(c, d) {                    b.strings.push(a(d).html())                })            }            this.init()        },        typewrite: function(a, b) {            if (this.stop !== !0) {                var c = Math.round(70 * Math.random()) + this.typeSpeed,                    d = this;                d.timeout = setTimeout(function() {                    var c = 0,                        e = a.substr(b);                    if ("^" === e.charAt(0)) {                        var f = 1;                        /^\^\d+/.test(e) && (e = /\d+/.exec(e)[0], f += e.length, c = parseInt(e)), a = a.substring(0, b) + a.substring(b + f)                    }                    if ("html" === d.contentType) {                        var g = a.substr(b).charAt(0);                        if ("<" === g || "&" === g) {                            var h = "",                                i = "";                            for (i = "<" === g ? ">" : ";"; a.substr(b).charAt(0) !== i;) h += a.substr(b).charAt(0), b++;                            b++, h += i                        }                    }                    d.timeout = setTimeout(function() {                        if (b === a.length) {                            if (d.options.onStringTyped(d.arrayPos), d.arrayPos === d.strings.length - 1 && (d.options.callback(), d.curLoop++, d.loop === !1 || d.curLoop === d.loopCount)) return;                            d.timeout = setTimeout(function() {                                d.backspace(a, b)                            }, d.backDelay)                        } else {                            0 === b && d.options.preStringTyped(d.arrayPos);                            var c = a.substr(0, b + 1);                            d.attr ? d.el.attr(d.attr, c) : d.isInput ? d.el.val(c) : "html" === d.contentType ? d.el.html(c) : d.el.text(c), b++, d.typewrite(a, b)                        }                    }, c)                }, c)            }        },        backspace: function(a, b) {            if (this.stop !== !0) {                var c = Math.round(70 * Math.random()) + this.backSpeed,                    d = this;                d.timeout = setTimeout(function() {                    if ("html" === d.contentType && ">" === a.substr(b).charAt(0)) {                        for (var c = "";                            "<" !== a.substr(b).charAt(0) c -= a.substr(b).charAt(0), b--;                        b--, c += "<"                    }                    var e = a.substr(0, b);                    d.attr ? d.el.attr(d.attr, e) : d.isInput ? d.el.val(e) : "html" === d.contentType ? d.el.html(e) : d.el.text(e), b > d.stopNum ? (b--, d.backspace(a, b)) : b <= d.stopNum && (d.arrayPos++, d.arrayPos === d.strings.length ? (d.arrayPos = 0, d.shuffle && (d.sequence = d.shuffleArray(d.sequence)), d.init()) : d.typewrite(d.strings[d.sequence[d.arrayPos]], b))                }, c)            }        },        shuffleArray: function(a) {            var b, c, d = a.length;            if (d)                for (; --d;) c = Math.floor(Math.random() * (d + 1)), b = a[c], a[c] = a[d], a[d] = b;            return a        },        reset: function() {            var a = this;            clearInterval(a.timeout);            var b = this.el.attr("id");            this.el.after('<span id="' + b + '"/>'), this.el.remove(), "undefined" != typeof this.cursor && this.cursor.remove(), a.options.resetCallback()        }    }, a.fn.typed = function(c) {        return this.each(function() {            var d = a(this),                e = d.data("typed"),                f = "object" == typeof c && c;            e || d.data("typed", e = new b(this, f)), "string" == typeof c && e[c]()        })    }, a.fn.typed.defaults = {        strings: ["These are the default values...", "You know what you should do?", "Use your own!", "Have a great day!"],        stringsElement: null,        typeSpeed: 0,        startDelay: 0,        backSpeed: 0,        shuffle: !1,        backDelay: 500,        loop: !1,        loopCount: !1,        showCursor: !0,        cursorChar: "|",        attr: null,        contentType: "html",        callback: function() {},        preStringTyped: function() {},        onStringTyped: function() {},        resetCallback: function() {}    }}(window.jQuery);;jQuery(function($) {        if ($(".element").length > 0) {            $(".element").typed({                strings: ["Saumya Majumder.", "a geek.", "an Engineer.", "a Code Lover.", "a Google fan.", "an Apple fan.", "an Android fan.", "a WordPress fan.", "an Inventor.", "a Coffee lover.", "a Tea lover."],                typeSpeed: 100,                backDelay: 3000,                loop: true            });        } 

[Nelius]

Wow, thank you for centuries! 

 

And about this violating licences he is doing, what do you mean and how do you figure that out?

[Hazy125]

Wow, thank you for centuries! 

 

And about this violating licences he is doing, what do you mean and how do you figure that out?

Most libraries require you to leave in these things

/*! * jQuery JavaScript Library v1.11.3 * http://jquery.com/ * * Includes Sizzle.js * http://sizzlejs.com/ * * Copyright 2005, 2014 jQuery Foundation, Inc. and other contributors * Released under the MIT license * http://jquery.org/license * * Date: 2015-04-28T16:19Z */

For obvious reasons. He seems to have just whacked a whole bunch of the code only from various things into one large script is all. Nothing too bad, but give credit where credit is due

[PampaZiya]

You can do this using javascript. Split the text in two divisions, one containing the "Hi I'm..." and the other containing the flashing I.

 

You can use this code to make the flashing animation too:

 

       function Flash() {                line = document.getElementById("flashingI");                var a = 0.8;                s = setInterval(function () { line.setAttribute("style", "opacity:" + a); a -= 0.1 ;  if (a <= 0.1) { clearInterval(s); Flash(); }}, 100);            }

Now for the text you can use this: (for the writing effect)

      function Movetext() {                mtext = document.getElementById("movingtext");                textChar = mtext.innerHTML;                mtext.innerHTML = "";                var i = 0;                p = setInterval(function () { mtext.innerHTML += textChar[i]; i++; if (i == textChar.length + 1) { clearInterval(p); mtext.innerHTML = ""; i = 0; Movetext(); } }, 200);            }

just use a global variable and a switch case to go from "Android Lover" to "Apple lover" or whatever you want. Tried it and it works pretty much the same as the site.

[Nuluvius]

I sent him a email, but he says that he is against "free help"  :wacko: ... so whatever.

 

In other words he simply doesn't have a clue how it works and has ripped it from somewhere else (as has already been pointed out). He states that he is a Software Engineer but all I can see on that prefab website is Web Development and Web Development that almost any chimp could do for that matter. That is not software engineering.

 

I had to LOL hard at the WordPress 'extraordinary awesome website created with extreme care & experience'  :lol:

 

Moreover the english in sections of that site is appalling.

[RavenousRavenDesign]

In other words he simply doesn't have a clue how it works and has ripped it from somewhere else (as has already been pointed out). He states that he is a Software Engineer but all I can see on that prefab website is Web Development and Web Development that almost any chimp could do for that matter. That is not software engineering.

 

I had to LOL hard at the WordPress 'extraordinary awesome website created with extreme care & experience'  :lol:

 

Moreover the english in sections of that site is appalling.

 

 

This guy has this typing animation that, for the life of me, I cannot figure out!

 

I did all kinds of web inspection on his site for hours and the closest thing i found out is that it something to do with "@keyframes", "-moz" & "-webkit"

 

https://www.isaumya.com/

 

I sent him a email, but he says that he is against "free help"  :wacko: ... so whatever. I'm sure the people here are okay with spreading a little bit of knowledge so one day I can do the same.

 

 

Nelius,

I understand where you are coming from. I remember back when I first started learning to code, there were all sorts of things I would see online and wanted so dearly to learn "how do they do that?" In fact, I still see stuff that makes me say, "how the heck did they do that?". I even found myself trying to ask the developer how they did something. Some were nice and some ignored me and some were mean to me. I am not a perfect developer nor a perfect designer. But I am lucky enough to be pretty damn good at both to the point that I do this full time for a living right from the comfort of my home. I would just like to give you a tad bit of advice.  

 

Google is your friend, and your teacher. As you can see on his website, I assume it's the "typing text" animation you like, correct? Did you happen to try googling "typing text animation" along with "css, html, javascript, jquery"....? If so, you would see there are MANY tutorials available online that show you how to do this. Here is one I found in 10 seconds http://www.mattboldt.com/demos/typed-js/ Hope this one helps you.

 

 

Neluvius, 

You are so right! Software Development/Engineer is NOT Web Development. Web Development is NOT Web Design.  These are all 4 completly seperate jobs. Being able to just do ONE of them is a talent. But being able to do all 4? Well, that's pretty impressive to me. I have a degree myself in software development. But when I left school, I never made any computer software. I went straight into web design and development and had to teach myself most of everything because they only covered basic stuff in school as the focus was more software rather than web technologies. 

 

I'm not sure why you are so bent out of shape over his english? I work with lots of people all over the world. I myself only know one language, it's english. But a lot of the people I work with in India and China, they know 2-4 languages. I myself am a customer of some of saumya's custom products. So I've spoken with him a few times. The guy knows 4 spoken languages and he speaks english perfectly. As you and I both know, not even some of us americans or english folk can use proper grammar and spelling and formatting when writing and we only know our ONE language.

 

P.S. Neluvius: I'm a fan of your writing, you write very well. I like your "bad trip at the zoo" story. It makes me smile

 

To the world of IT,

Can't we all just get along and work and learn from one another, rather than point fingers and hate on one another? Just from experience, I know it sucks having to hear some fancy school taught graphic designer tell me my work is crap to my face. Luckily, it just motivates me to be better, but not everyone can take harsh criticism well like me. We are all constantly learning in this field, there won't' be a day you stop learning because the web is always changing. You will find it easier on you, to make friends with developers rather than put them down. We all started not knowing anything. Being kind and respectful will open up opportunities for you to be hired by a developer if you ever found yourself needing work. Being kind and respectful in general, will bring positivity your way.

[Nuluvius]

I'm not sure why you are so bent out of shape over his english? I work with lots of people all over the world. I myself only know one language, it's english. But a lot of the people I work with in India and China, they know 2-4 languages. I myself am a customer of some of saumya's custom products. So I've spoken with him a few times. The guy knows 4 spoken languages and he speaks english perfectly. As you and I both know, not even some of us americans or english folk can use proper grammar and spelling and formatting when writing and we only know our ONE language.

 

It's not so much that it bothers me or that it's specifically English in this case. The main problem that I can see is that when one has forward facing marketing like this - be that in any language - if it's not correct then it does not instil confidence in the customer. Essentially it distils down to the psychology of the matter, that's all.

 

To the world of IT,

Can't we all just get along and work and learn from one another, rather than point fingers and hate on one another? Just from experience, I know it sucks having to hear some fancy school taught graphic designer tell me my work is crap to my face. Luckily, it just motivates me to be better, but not everyone can take harsh criticism well like me. We are all constantly learning in this field, there won't' be a day you stop learning because the web is always changing. You will find it easier on you, to make friends with developers rather than put them down. We all started not knowing anything. Being kind and respectful will open up opportunities for you to be hired by a developer if you ever found yourself needing work. Being kind and respectful in general, will bring positivity your way.

 

It's certainly very noble to take this standpoint. It's one that I for sure share and try to enable and propagate wherever and whenever possible but after many years in the industry (and elsewhere for that matter) I don't think it's possible to get away from those that get off on the demoralization of others. I think it's a demonstration of ingrained base human nature at it's finest sadly 

 

P.S. Neluvius: I'm a fan of your writing, you write very well. I like your "bad trip at the zoo" story. It makes me smile 

 

Thanks :lol: incidentally my finger is almost fully recovered now, which is somewhat of a miracle according to the specialists and the research.