CSS Newsticker with delay between animations (and other problems)
first of all: I'm not very skilled in CSS. I managed to get a CSS Newsticker to work (source: Pure CSS ticker without absolute positioning). But unfortunately it doesn't work as intended.
- How do I get rid of the delay between the completions of the animation and the restart?
- How do I avoid the Ticker-Text to disappear before running through the complete Ticker-Wrap? Edit: See here https://jsfiddle.net/uLvzrtg0/ - it seems to happen with a fixed width?
What is the best way to make the animation time variable dependant on length of Input-text? (I've tried Javascript and it works kinda well - except in IE)
<script>
var vSpeed = (5+params[0].length*.18)+"s";
if(params[0]=="")
{
document.getElementById("tickerwrap").style.display="none";
}else{
document.getElementById("ticker").style["-webkit-animation-duration"] = vSpeed;
document.getElementById("ticker").style["animation-duration"] = vSpeed;
}
JSFiddle with an example: https://jsfiddle.net/08921sek/
<p>Content before ticker</p>
<div id="tickerwrap">
<div id="ticker">
This is some Text. This is some more Text1. This is some more Text2. This is some more Text3. This is some more Text4. This is some more Text5. This is some more Text6. This is some more Text7. This is some more Text8. This is some more Text9. This is some more Text10.
</div>
</div>
<p>Content after ticker</p>
<style>
@keyframes customticker {
0% {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
/* Formatting the full-width ticker wrapper background and font color */
#tickerwrap {
width: 100%;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
}
/* Formatting the ticker content background, font color, padding and exit state */
#ticker {
display: inline-block;
white-space: nowrap;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: customticker;
animation-name: customticker;
-webkit-animation-duration: 15s;
animation-duration: 15s;
}
</style>
Thanks for any advice! And sorry if I didn't follow some rules!
Best regards
shoop
javascript css css-animations marquee ticker
add a comment |
first of all: I'm not very skilled in CSS. I managed to get a CSS Newsticker to work (source: Pure CSS ticker without absolute positioning). But unfortunately it doesn't work as intended.
- How do I get rid of the delay between the completions of the animation and the restart?
- How do I avoid the Ticker-Text to disappear before running through the complete Ticker-Wrap? Edit: See here https://jsfiddle.net/uLvzrtg0/ - it seems to happen with a fixed width?
What is the best way to make the animation time variable dependant on length of Input-text? (I've tried Javascript and it works kinda well - except in IE)
<script>
var vSpeed = (5+params[0].length*.18)+"s";
if(params[0]=="")
{
document.getElementById("tickerwrap").style.display="none";
}else{
document.getElementById("ticker").style["-webkit-animation-duration"] = vSpeed;
document.getElementById("ticker").style["animation-duration"] = vSpeed;
}
JSFiddle with an example: https://jsfiddle.net/08921sek/
<p>Content before ticker</p>
<div id="tickerwrap">
<div id="ticker">
This is some Text. This is some more Text1. This is some more Text2. This is some more Text3. This is some more Text4. This is some more Text5. This is some more Text6. This is some more Text7. This is some more Text8. This is some more Text9. This is some more Text10.
</div>
</div>
<p>Content after ticker</p>
<style>
@keyframes customticker {
0% {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
/* Formatting the full-width ticker wrapper background and font color */
#tickerwrap {
width: 100%;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
}
/* Formatting the ticker content background, font color, padding and exit state */
#ticker {
display: inline-block;
white-space: nowrap;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: customticker;
animation-name: customticker;
-webkit-animation-duration: 15s;
animation-duration: 15s;
}
</style>
Thanks for any advice! And sorry if I didn't follow some rules!
Best regards
shoop
javascript css css-animations marquee ticker
add a comment |
first of all: I'm not very skilled in CSS. I managed to get a CSS Newsticker to work (source: Pure CSS ticker without absolute positioning). But unfortunately it doesn't work as intended.
- How do I get rid of the delay between the completions of the animation and the restart?
- How do I avoid the Ticker-Text to disappear before running through the complete Ticker-Wrap? Edit: See here https://jsfiddle.net/uLvzrtg0/ - it seems to happen with a fixed width?
What is the best way to make the animation time variable dependant on length of Input-text? (I've tried Javascript and it works kinda well - except in IE)
<script>
var vSpeed = (5+params[0].length*.18)+"s";
if(params[0]=="")
{
document.getElementById("tickerwrap").style.display="none";
}else{
document.getElementById("ticker").style["-webkit-animation-duration"] = vSpeed;
document.getElementById("ticker").style["animation-duration"] = vSpeed;
}
JSFiddle with an example: https://jsfiddle.net/08921sek/
<p>Content before ticker</p>
<div id="tickerwrap">
<div id="ticker">
This is some Text. This is some more Text1. This is some more Text2. This is some more Text3. This is some more Text4. This is some more Text5. This is some more Text6. This is some more Text7. This is some more Text8. This is some more Text9. This is some more Text10.
</div>
</div>
<p>Content after ticker</p>
<style>
@keyframes customticker {
0% {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
/* Formatting the full-width ticker wrapper background and font color */
#tickerwrap {
width: 100%;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
}
/* Formatting the ticker content background, font color, padding and exit state */
#ticker {
display: inline-block;
white-space: nowrap;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: customticker;
animation-name: customticker;
-webkit-animation-duration: 15s;
animation-duration: 15s;
}
</style>
Thanks for any advice! And sorry if I didn't follow some rules!
Best regards
shoop
javascript css css-animations marquee ticker
first of all: I'm not very skilled in CSS. I managed to get a CSS Newsticker to work (source: Pure CSS ticker without absolute positioning). But unfortunately it doesn't work as intended.
- How do I get rid of the delay between the completions of the animation and the restart?
- How do I avoid the Ticker-Text to disappear before running through the complete Ticker-Wrap? Edit: See here https://jsfiddle.net/uLvzrtg0/ - it seems to happen with a fixed width?
What is the best way to make the animation time variable dependant on length of Input-text? (I've tried Javascript and it works kinda well - except in IE)
<script>
var vSpeed = (5+params[0].length*.18)+"s";
if(params[0]=="")
{
document.getElementById("tickerwrap").style.display="none";
}else{
document.getElementById("ticker").style["-webkit-animation-duration"] = vSpeed;
document.getElementById("ticker").style["animation-duration"] = vSpeed;
}
JSFiddle with an example: https://jsfiddle.net/08921sek/
<p>Content before ticker</p>
<div id="tickerwrap">
<div id="ticker">
This is some Text. This is some more Text1. This is some more Text2. This is some more Text3. This is some more Text4. This is some more Text5. This is some more Text6. This is some more Text7. This is some more Text8. This is some more Text9. This is some more Text10.
</div>
</div>
<p>Content after ticker</p>
<style>
@keyframes customticker {
0% {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
/* Formatting the full-width ticker wrapper background and font color */
#tickerwrap {
width: 100%;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
}
/* Formatting the ticker content background, font color, padding and exit state */
#ticker {
display: inline-block;
white-space: nowrap;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: customticker;
animation-name: customticker;
-webkit-animation-duration: 15s;
animation-duration: 15s;
}
</style>
Thanks for any advice! And sorry if I didn't follow some rules!
Best regards
shoop
javascript css css-animations marquee ticker
javascript css css-animations marquee ticker
edited Nov 27 '18 at 15:49
sHooP
asked Nov 27 '18 at 15:40
sHooPsHooP
123
123
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You can start animation from transform: translate3d(0, 0, 0);
And for that you might need additional changes like making ticker padding-right: 100%;
and tickerwrap padding-left: 100%;
. For the second question (avoid disappearing text), you might need to add one more container and make it overflow:hidden;
.
See the Snippet below:
/* Specifying the name for animation keyframes and keyframes themselves */
@keyframes customticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
/* Formatting the full-width ticker wrapper background and font color */
#tickerwrap {
width: 100%;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding-left: 100%;
}
/* Formatting the ticker content background, font color, padding and exit state */
#ticker {
display: inline-block;
white-space: nowrap;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: customticker;
animation-name: customticker;
-webkit-animation-duration: 7s;
animation-duration: 7s;
padding-right: 100%;
}
#container {
overflow:hidden;
width:100%;
}
<p>Content before ticker</p>
<div id="container">
<div id="tickerwrap">
<div id="ticker">This is some Text. This is some more Text1. This is some more Text2. This is some more Text3. This is some more Text4. This is some more Text5. This is some more Text6. This is some more Text7. This is some more Text8. This is some more Text9. This is some more Text10.</div>
</div>
</div>
<p>Content after ticker</p>
You can also test it here.
Hope this wilkl help you! :)
Works like a charm! Thank you very much.
– sHooP
Nov 28 '18 at 7:39
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53503156%2fcss-newsticker-with-delay-between-animations-and-other-problems%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can start animation from transform: translate3d(0, 0, 0);
And for that you might need additional changes like making ticker padding-right: 100%;
and tickerwrap padding-left: 100%;
. For the second question (avoid disappearing text), you might need to add one more container and make it overflow:hidden;
.
See the Snippet below:
/* Specifying the name for animation keyframes and keyframes themselves */
@keyframes customticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
/* Formatting the full-width ticker wrapper background and font color */
#tickerwrap {
width: 100%;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding-left: 100%;
}
/* Formatting the ticker content background, font color, padding and exit state */
#ticker {
display: inline-block;
white-space: nowrap;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: customticker;
animation-name: customticker;
-webkit-animation-duration: 7s;
animation-duration: 7s;
padding-right: 100%;
}
#container {
overflow:hidden;
width:100%;
}
<p>Content before ticker</p>
<div id="container">
<div id="tickerwrap">
<div id="ticker">This is some Text. This is some more Text1. This is some more Text2. This is some more Text3. This is some more Text4. This is some more Text5. This is some more Text6. This is some more Text7. This is some more Text8. This is some more Text9. This is some more Text10.</div>
</div>
</div>
<p>Content after ticker</p>
You can also test it here.
Hope this wilkl help you! :)
Works like a charm! Thank you very much.
– sHooP
Nov 28 '18 at 7:39
add a comment |
You can start animation from transform: translate3d(0, 0, 0);
And for that you might need additional changes like making ticker padding-right: 100%;
and tickerwrap padding-left: 100%;
. For the second question (avoid disappearing text), you might need to add one more container and make it overflow:hidden;
.
See the Snippet below:
/* Specifying the name for animation keyframes and keyframes themselves */
@keyframes customticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
/* Formatting the full-width ticker wrapper background and font color */
#tickerwrap {
width: 100%;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding-left: 100%;
}
/* Formatting the ticker content background, font color, padding and exit state */
#ticker {
display: inline-block;
white-space: nowrap;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: customticker;
animation-name: customticker;
-webkit-animation-duration: 7s;
animation-duration: 7s;
padding-right: 100%;
}
#container {
overflow:hidden;
width:100%;
}
<p>Content before ticker</p>
<div id="container">
<div id="tickerwrap">
<div id="ticker">This is some Text. This is some more Text1. This is some more Text2. This is some more Text3. This is some more Text4. This is some more Text5. This is some more Text6. This is some more Text7. This is some more Text8. This is some more Text9. This is some more Text10.</div>
</div>
</div>
<p>Content after ticker</p>
You can also test it here.
Hope this wilkl help you! :)
Works like a charm! Thank you very much.
– sHooP
Nov 28 '18 at 7:39
add a comment |
You can start animation from transform: translate3d(0, 0, 0);
And for that you might need additional changes like making ticker padding-right: 100%;
and tickerwrap padding-left: 100%;
. For the second question (avoid disappearing text), you might need to add one more container and make it overflow:hidden;
.
See the Snippet below:
/* Specifying the name for animation keyframes and keyframes themselves */
@keyframes customticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
/* Formatting the full-width ticker wrapper background and font color */
#tickerwrap {
width: 100%;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding-left: 100%;
}
/* Formatting the ticker content background, font color, padding and exit state */
#ticker {
display: inline-block;
white-space: nowrap;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: customticker;
animation-name: customticker;
-webkit-animation-duration: 7s;
animation-duration: 7s;
padding-right: 100%;
}
#container {
overflow:hidden;
width:100%;
}
<p>Content before ticker</p>
<div id="container">
<div id="tickerwrap">
<div id="ticker">This is some Text. This is some more Text1. This is some more Text2. This is some more Text3. This is some more Text4. This is some more Text5. This is some more Text6. This is some more Text7. This is some more Text8. This is some more Text9. This is some more Text10.</div>
</div>
</div>
<p>Content after ticker</p>
You can also test it here.
Hope this wilkl help you! :)
You can start animation from transform: translate3d(0, 0, 0);
And for that you might need additional changes like making ticker padding-right: 100%;
and tickerwrap padding-left: 100%;
. For the second question (avoid disappearing text), you might need to add one more container and make it overflow:hidden;
.
See the Snippet below:
/* Specifying the name for animation keyframes and keyframes themselves */
@keyframes customticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
/* Formatting the full-width ticker wrapper background and font color */
#tickerwrap {
width: 100%;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding-left: 100%;
}
/* Formatting the ticker content background, font color, padding and exit state */
#ticker {
display: inline-block;
white-space: nowrap;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: customticker;
animation-name: customticker;
-webkit-animation-duration: 7s;
animation-duration: 7s;
padding-right: 100%;
}
#container {
overflow:hidden;
width:100%;
}
<p>Content before ticker</p>
<div id="container">
<div id="tickerwrap">
<div id="ticker">This is some Text. This is some more Text1. This is some more Text2. This is some more Text3. This is some more Text4. This is some more Text5. This is some more Text6. This is some more Text7. This is some more Text8. This is some more Text9. This is some more Text10.</div>
</div>
</div>
<p>Content after ticker</p>
You can also test it here.
Hope this wilkl help you! :)
/* Specifying the name for animation keyframes and keyframes themselves */
@keyframes customticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
/* Formatting the full-width ticker wrapper background and font color */
#tickerwrap {
width: 100%;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding-left: 100%;
}
/* Formatting the ticker content background, font color, padding and exit state */
#ticker {
display: inline-block;
white-space: nowrap;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: customticker;
animation-name: customticker;
-webkit-animation-duration: 7s;
animation-duration: 7s;
padding-right: 100%;
}
#container {
overflow:hidden;
width:100%;
}
<p>Content before ticker</p>
<div id="container">
<div id="tickerwrap">
<div id="ticker">This is some Text. This is some more Text1. This is some more Text2. This is some more Text3. This is some more Text4. This is some more Text5. This is some more Text6. This is some more Text7. This is some more Text8. This is some more Text9. This is some more Text10.</div>
</div>
</div>
<p>Content after ticker</p>
/* Specifying the name for animation keyframes and keyframes themselves */
@keyframes customticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
/* Formatting the full-width ticker wrapper background and font color */
#tickerwrap {
width: 100%;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding-left: 100%;
}
/* Formatting the ticker content background, font color, padding and exit state */
#ticker {
display: inline-block;
white-space: nowrap;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: customticker;
animation-name: customticker;
-webkit-animation-duration: 7s;
animation-duration: 7s;
padding-right: 100%;
}
#container {
overflow:hidden;
width:100%;
}
<p>Content before ticker</p>
<div id="container">
<div id="tickerwrap">
<div id="ticker">This is some Text. This is some more Text1. This is some more Text2. This is some more Text3. This is some more Text4. This is some more Text5. This is some more Text6. This is some more Text7. This is some more Text8. This is some more Text9. This is some more Text10.</div>
</div>
</div>
<p>Content after ticker</p>
answered Nov 27 '18 at 19:50
Nimit ShahNimit Shah
2,1721311
2,1721311
Works like a charm! Thank you very much.
– sHooP
Nov 28 '18 at 7:39
add a comment |
Works like a charm! Thank you very much.
– sHooP
Nov 28 '18 at 7:39
Works like a charm! Thank you very much.
– sHooP
Nov 28 '18 at 7:39
Works like a charm! Thank you very much.
– sHooP
Nov 28 '18 at 7:39
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53503156%2fcss-newsticker-with-delay-between-animations-and-other-problems%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown